Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
1. add html below in <app-root></app-root> or in index.html
<app-root>
<div id="pre-bootstrap">
<div class="messaging">
<h1>
Website is Loading
</h1>
<div class="app-loader">
<div class="app-loader-inner">
<label>&#9679</label>
<label>&#9679</label>
<label>&#9679</label>
<label>&#9679</label>
<label>&#9679</label>
<label>&#9679</label>
</div>
</div>
<p>
Trojan Trading LIMITED
</p>
</div>
</div>
</app-root>
2. css
/*/*#region post login progress */
#pre-bootstrap {
background-color: #262626;
bottom: 0px;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
z-index: 999999;
}
#pre-bootstrap div.messaging {
color: #FFFFFF;
font-family: monospace;
left: 0px;
margin-top: -107px;
position: absolute;
right: 0px;
text-align: center;
top: 50%;
}
#pre-bootstrap h1 {
font-size: 26px;
line-height: 35px;
margin: 0px 0px 20px 0px;
}
#pre-bootstrap p {
font-size: 14px;
line-height: 14px;
margin: 0px 0px 0px 0px;
}
.prebootShow {
opacity: 1 !important;
}
.prebootStep {
opacity: 0;
transition: .5s ease-in-out all;
}
.app-loader {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.app-loader-inner {
transform: translateY(-50%);
top: 60%;
position: absolute;
width: 100%;
color: #FFF;
padding: 0 100px;
text-align: center;
}
.app-loader-inner label {
font-size: 20px;
opacity: 0;
display: inline-block;
color: gray;
}
@keyframes lol {
0% {
opacity: 0;
transform: translateX(-300px);
}
33% {
opacity: 1;
transform: translateX(0px);
}
66% {
opacity: 1;
transform: translateX(0px);
}
100% {
opacity: 0;
transform: translateX(300px);
}
}
@-webkit-keyframes lol {
0% {
opacity: 0;
-webkit-transform: translateX(-300px);
}
33% {
opacity: 1;
-webkit-transform: translateX(0px);
}
66% {
opacity: 1;
-webkit-transform: translateX(0px);
}
100% {
opacity: 0;
-webkit-transform: translateX(300px);
}
}
.app-loader-inner label:nth-child(6) {
-webkit-animation: lol 3s infinite ease-in-out;
animation: lol 3s infinite ease-in-out;
}
.app-loader-inner label:nth-child(5) {
-webkit-animation: lol 3s 100ms infinite ease-in-out;
animation: lol 3s 100ms infinite ease-in-out;
}
.app-loader-inner label:nth-child(4) {
-webkit-animation: lol 3s 200ms infinite ease-in-out;
animation: lol 3s 200ms infinite ease-in-out;
}
.app-loader-inner label:nth-child(3) {
-webkit-animation: lol 3s 300ms infinite ease-in-out;
animation: lol 3s 300ms infinite ease-in-out;
}
.app-loader-inner label:nth-child(2) {
-webkit-animation: lol 3s 400ms infinite ease-in-out;
animation: lol 3s 400ms infinite ease-in-out;
}
.app-loader-inner label:nth-child(1) {
-webkit-animation: lol 3s 500ms infinite ease-in-out;
animation: lol 3s 500ms infinite ease-in-out;
}
/*#endregion */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.