58 lines
710 B
SCSS
58 lines
710 B
SCSS
/**
|
|
* LOADING BAR
|
|
*
|
|
* Markup:
|
|
* ---------
|
|
* <div class="loadingBar"></div>
|
|
*
|
|
*/
|
|
|
|
.loadingBar {
|
|
height: $h-loading-bar;
|
|
left: 0;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: $z-loading-bar;
|
|
|
|
&::before {
|
|
animation: loading 2s linear infinite;
|
|
background-color: $c-primary;
|
|
content: '';
|
|
display: block;
|
|
height: $h-loading-bar;
|
|
left: -$w-loading-bar;
|
|
position: absolute;
|
|
width: $w-loading-bar;
|
|
}
|
|
}
|
|
|
|
@keyframes loading {
|
|
from {
|
|
left: -$w-loading-bar;
|
|
width: 30%;
|
|
}
|
|
|
|
50% {
|
|
width: 30%;
|
|
}
|
|
|
|
70% {
|
|
width: 70%;
|
|
}
|
|
|
|
80% {
|
|
left: 50%;
|
|
}
|
|
|
|
95% {
|
|
left: 120%;
|
|
}
|
|
|
|
to {
|
|
left: 100%;
|
|
}
|
|
}
|