99 lines
1.4 KiB
SCSS
99 lines
1.4 KiB
SCSS
/* circular loader */
|
|
@keyframes mask1 {
|
|
0% {
|
|
stroke-dashoffset: 1;
|
|
}
|
|
17.86% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes mask2 {
|
|
0% {
|
|
stroke-dashoffset: 1;
|
|
}
|
|
17.86% {
|
|
stroke-dashoffset: 1;
|
|
}
|
|
31.43% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes mask3 {
|
|
0% {
|
|
stroke-dashoffset: 1;
|
|
}
|
|
31.43% {
|
|
stroke-dashoffset: 1;
|
|
}
|
|
85% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes spinner-color {
|
|
0%,
|
|
100% {
|
|
stroke: #42a5f5;
|
|
}
|
|
25% {
|
|
stroke: #f44336;
|
|
}
|
|
50% {
|
|
stroke: #fdd835;
|
|
}
|
|
75% {
|
|
stroke: #4caf50;
|
|
}
|
|
}
|
|
|
|
.spinner {
|
|
width: 70px;
|
|
height: 70px;
|
|
margin: auto;
|
|
|
|
path:nth-child(1) {
|
|
animation: mask1 2s cubic-bezier(0.417, 0.086, 0.741, 0.452) infinite;
|
|
}
|
|
path:nth-child(2) {
|
|
animation: mask2 2s cubic-bezier(0.333, 0.317, 0.621, 0.661) infinite;
|
|
}
|
|
path:nth-child(3) {
|
|
animation: mask3 2s cubic-bezier(0, 0, 0.431, 1) infinite;
|
|
}
|
|
|
|
g {
|
|
animation: spinner-color 8s steps(1) infinite;
|
|
}
|
|
|
|
.white & path {
|
|
stroke: #fff;
|
|
}
|
|
}
|
|
|
|
/* small horizontal loader */
|
|
@keyframes ddloader {
|
|
0% {
|
|
background-position: left;
|
|
}
|
|
|
|
100% {
|
|
background-position: right;
|
|
}
|
|
}
|
|
|
|
.ddloader {
|
|
@if $theme-light {
|
|
background: img-url('loader/blackx1.png') no-repeat;
|
|
} @else {
|
|
background: img-url('loader/whitex1.png') no-repeat;
|
|
}
|
|
|
|
animation: ddloader 0.5s steps(15) infinite;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 8px;
|
|
}
|