2021-04-28 20:10:26 +02:00

91 lines
2.0 KiB
SCSS

.dataloader {
display: inline-block;
width: 20px;
height: 20px;
&[data-loader='circle'] {
-webkit-animation: circle infinite .75s linear;
-moz-animation: circle infinite .75s linear;
-o-animation: circle infinite .75s linear;
animation: circle infinite .75s linear;
border: 2px solid $vte-primary;
border-top-color: transparent;
border-radius: 100%;
}
&.light {
border: 2px solid $vte-box-light-bg;
border-top-color: $vte-primary;
}
}
@-webkit-keyframes circle {
0%
{
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes circle {
0%
{
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes circle {
0%
{
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes circle {
0%
{
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}