Created
October 4, 2019 17:18
-
-
Save ceelsoin/d7dc1d696b28d0a40a55a1e3a400a130 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.hidden { | |
visibility: hidden; | |
} | |
.loader-overlay { | |
position: fixed; | |
width: 100%; | |
height: 100vh; | |
// z-index: 1000; | |
background-color:rgba(0,0,0,0.5); | |
top: 0; | |
z-index: 1109; | |
} | |
.popup-spinner{ | |
margin-top: 15%; | |
top: 0; | |
// position: absolute; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
z-index: 1110; | |
} | |
.loader { | |
height: 4px; | |
width: 100%; | |
position: relative; | |
overflow: hidden; | |
background-color: #FFF; | |
} | |
.loader:before { | |
display: block; | |
position: absolute; | |
content: ""; | |
left: -200px; | |
width: 200px; | |
height: 4px; | |
background-color: orange; | |
animation: loading 2s linear infinite; | |
} | |
@keyframes loading { | |
from { | |
left: -200px; | |
width: 30%; | |
} | |
50% { | |
width: 30%; | |
} | |
70% { | |
width: 70%; | |
} | |
80% { | |
left: 50%; | |
} | |
95% { | |
left: 120%; | |
} | |
to { | |
left: 100%; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="loader-overlay"> | |
<div class="popup-spinner"> | |
<div class="card" style="width: 18rem;"> | |
<div class="card-body"> | |
<div class="text-center"> | |
<h4>Aguarde</h4> | |
<br> | |
</div> | |
<div class="progress"> | |
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" | |
aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment