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
112 lines
4.1 KiB
.#{$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);
|
|
}
|
|
}
|
|
|