BetterDiscordApp-v2/client/src/styles/partials/generic/spinners/0.scss

132 lines
3.0 KiB
SCSS
Raw Normal View History

.bd-spinner {
width: 40px;
height: 40px;
position: relative;
-webkit-animation: bd-spinner-anim 2s cubic-bezier(0.4, 0, 0, 1) infinite;
animation: bd-spinner-anim 2s cubic-bezier(0.4, 0, 0, 1) infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
&::before {
content: "";
background: #fff;
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
right: 5px;
top: 15px;
-webkit-animation: bd-spinner-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite;
animation: bd-spinner-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
&::after {
content: "";
background: #fff;
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
left: 5px;
top: 15px;
-webkit-animation: bd-spinner-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
animation: bd-spinner-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
@-webkit-keyframes bd-spinner-anim {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes bd-spinner-anim {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes bd-spinner-anim-before {
0% {
-webkit-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
}
@keyframes bd-spinner-anim-before {
0% {
-webkit-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
}
@-webkit-keyframes bd-spinner-anim-after {
0% {
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
}
}
@keyframes bd-spinner-anim-after {
0% {
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
}
}