67 lines
3.1 KiB
SCSS
67 lines
3.1 KiB
SCSS
.bd-spinner10 {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: relative;
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
animation: bd-spinner10Anim 1s cubic-bezier(.4, 0, 0, 1) infinite;
|
|
|
|
&::before {
|
|
content: '';
|
|
left: 0;
|
|
top: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
position: absolute;
|
|
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat;
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
animation: bd-spinner10Anim1 1s cubic-bezier(.4, 0, 0, 1) -.05s infinite;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
left: 0;
|
|
top: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
position: absolute;
|
|
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50% / 70% no-repeat;
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
animation: bd-spinner10Anim1 1s cubic-bezier(.4, 0, 0, 1) infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes bd-spinner10Anim {
|
|
0% {
|
|
transform: scale(.8) rotate(.01deg);
|
|
}
|
|
|
|
40% {
|
|
transform: scale(1.3) rotate(.01deg);
|
|
}
|
|
|
|
80% {
|
|
transform: scale(1) rotate(.01deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(.8) rotate(.01deg);
|
|
}
|
|
}
|
|
|
|
@keyframes bd-spinner10Anim1 {
|
|
0% {
|
|
transform: rotate(-25deg) rotate(.01deg);
|
|
}
|
|
|
|
80% {
|
|
transform: rotate(375deg) rotate(.01deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(335deg) rotate(.01deg);
|
|
}
|
|
}
|