Open ghost opened 7 years ago
css : extract from the demo
`
.bs-docs-masthead { padding-top: 50px; padding-bottom: 40px; margin-bottom: 20px; }
.bs-docs-header h1, .bs-docs-header p { margin-right: 0px; }
.bs-docs-sidebar .nav > li > a { font-size: 15px; }
.bs-docs-sidebar .nav .nav > li > a { font-size: 14px; }
.back-top-top { font-size: 13px; }
.bs-loading-container { position: relative; margin-top: 15px; }
position: relative;
}
content: "";
position: absolute;
bottom: 0px;
right: 0px;
height: 50px;
width: 30%;
background: linear-gradient(135deg, transparent 50px, white 50px);
}
.bs-docs-masthead .version { color: #FFF; }
.bs-docs-dl dt { margin-top: 25px; padding-left: 25px; }
.bs-docs-dl dd { margin-top: 10px; padding-left: 50px; }
.tab-pane pre[class*="language-"] { margin: 0; border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; } `
hope it may help someone in the future
Also you can add spinner to the HTML template
<div id="floatingCirclesG">
<div class="f_circleG" id="frotateG_01"></div>
<div class="f_circleG" id="frotateG_02"></div>
<div class="f_circleG" id="frotateG_03"></div>
<div class="f_circleG" id="frotateG_04"></div>
<div class="f_circleG" id="frotateG_05"></div>
<div class="f_circleG" id="frotateG_06"></div>
<div class="f_circleG" id="frotateG_07"></div>
<div class="f_circleG" id="frotateG_08"></div>
</div>
<style>
#floatingCirclesG {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 51px;
height: 51px;
margin: auto;
transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
}
.f_circleG {
position: absolute;
background-color: rgb(255, 255, 255);
height: 9px;
width: 9px;
border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
animation-name: f_fadeG;
-o-animation-name: f_fadeG;
-ms-animation-name: f_fadeG;
-webkit-animation-name: f_fadeG;
-moz-animation-name: f_fadeG;
animation-duration: 0.622s;
-o-animation-duration: 0.622s;
-ms-animation-duration: 0.622s;
-webkit-animation-duration: 0.622s;
-moz-animation-duration: 0.622s;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-direction: normal;
-o-animation-direction: normal;
-ms-animation-direction: normal;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
}
#frotateG_01 {
left: 0;
top: 21px;
animation-delay: 0.2295s;
-o-animation-delay: 0.2295s;
-ms-animation-delay: 0.2295s;
-webkit-animation-delay: 0.2295s;
-moz-animation-delay: 0.2295s;
}
#frotateG_02 {
left: 6px;
top: 6px;
animation-delay: 0.316s;
-o-animation-delay: 0.316s;
-ms-animation-delay: 0.316s;
-webkit-animation-delay: 0.316s;
-moz-animation-delay: 0.316s;
}
#frotateG_03 {
left: 21px;
top: 0;
animation-delay: 0.3925s;
-o-animation-delay: 0.3925s;
-ms-animation-delay: 0.3925s;
-webkit-animation-delay: 0.3925s;
-moz-animation-delay: 0.3925s;
}
#frotateG_04 {
right: 6px;
top: 6px;
animation-delay: 0.469s;
-o-animation-delay: 0.469s;
-ms-animation-delay: 0.469s;
-webkit-animation-delay: 0.469s;
-moz-animation-delay: 0.469s;
}
#frotateG_05 {
right: 0;
top: 21px;
animation-delay: 0.5455s;
-o-animation-delay: 0.5455s;
-ms-animation-delay: 0.5455s;
-webkit-animation-delay: 0.5455s;
-moz-animation-delay: 0.5455s;
}
#frotateG_06 {
right: 6px;
bottom: 6px;
animation-delay: 0.622s;
-o-animation-delay: 0.622s;
-ms-animation-delay: 0.622s;
-webkit-animation-delay: 0.622s;
-moz-animation-delay: 0.622s;
}
#frotateG_07 {
left: 21px;
bottom: 0;
animation-delay: 0.6985s;
-o-animation-delay: 0.6985s;
-ms-animation-delay: 0.6985s;
-webkit-animation-delay: 0.6985s;
-moz-animation-delay: 0.6985s;
}
#frotateG_08 {
left: 6px;
bottom: 6px;
animation-delay: 0.775s;
-o-animation-delay: 0.775s;
-ms-animation-delay: 0.775s;
-webkit-animation-delay: 0.775s;
-moz-animation-delay: 0.775s;
}
<a href='https://github.com/keyframes' class='user-mention'>@keyframes</a> f_fadeG {
0% {
background-color: rgb(0, 0, 0);
}
100% {
background-color: rgb(255, 255, 255);
}
}
@-o-keyframes f_fadeG {
0% {
background-color: rgb(0, 0, 0);
}
100% {
background-color: rgb(255, 255, 255);
}
}
@-ms-keyframes f_fadeG {
0% {
background-color: rgb(0, 0, 0);
}
100% {
background-color: rgb(255, 255, 255);
}
}
@-webkit-keyframes f_fadeG {
0% {
background-color: rgb(0, 0, 0);
}
100% {
background-color: rgb(255, 255, 255);
}
}
@-moz-keyframes f_fadeG {
0% {
background-color: rgb(0, 0, 0);
}
100% {
background-color: rgb(255, 255, 255);
}
}
</style
I know, angularjs is dying but... I am still using it. It took me quite a while to realize that overlay-template.html and css are missing from the dist folder. I hope the owner may add , if not, here you go:
overlay-template.html
`<div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin:auto; background-color: rgba(255,255,255,0.7);
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
" >
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;;
" class=" ">