You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

112 lines
4.1 KiB

4 years ago
.#{$namespace}loading{
.#{$namespace}spinner{
margin: 0 auto;
display: block;
}
}
.#{$namespace}spinner {
display: inline-block;
width: 24px;
height: 24px;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: spinner-spin 1s step-end infinite;
animation: spinner-spin 1s step-end infinite;
}
.#{$namespace}spinner:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat;
}
.#{$namespace}spinner-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%23fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
}
@-webkit-keyframes spinner-spin {
0% {
-webkit-transform: rotate(0deg);
}
8.33333333% {
-webkit-transform: rotate(30deg);
}
16.66666667% {
-webkit-transform: rotate(60deg);
}
25% {
-webkit-transform: rotate(90deg);
}
33.33333333% {
-webkit-transform: rotate(120deg);
}
41.66666667% {
-webkit-transform: rotate(150deg);
}
50% {
-webkit-transform: rotate(180deg);
}
58.33333333% {
-webkit-transform: rotate(210deg);
}
66.66666667% {
-webkit-transform: rotate(240deg);
}
75% {
-webkit-transform: rotate(270deg);
}
83.33333333% {
-webkit-transform: rotate(300deg);
}
91.66666667% {
-webkit-transform: rotate(330deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spinner-spin {
0% {
transform: rotate(0deg);
}
8.33333333% {
transform: rotate(30deg);
}
16.66666667% {
transform: rotate(60deg);
}
25% {
transform: rotate(90deg);
}
33.33333333% {
transform: rotate(120deg);
}
41.66666667% {
transform: rotate(150deg);
}
50% {
transform: rotate(180deg);
}
58.33333333% {
transform: rotate(210deg);
}
66.66666667% {
transform: rotate(240deg);
}
75% {
transform: rotate(270deg);
}
83.33333333% {
transform: rotate(300deg);
}
91.66666667% {
transform: rotate(330deg);
}
100% {
transform: rotate(360deg);
}
}