You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
xshop/resources/sass/preloader.scss

132 lines
2.6 KiB
SCSS

2 years ago
:root {
--bg: hsl(223deg, 10%, 90%);
--trans-dur: 0.3s;
}
.tvdd {
overflow: hidden;
position: relative;
width: 16em;
height: 16em;
}
.tvdd__ring {
top: 0;
left: 18.75%;
width: 62.5%;
height: 62.5%;
transform-origin: 50% 80%;
}
.tvdd__ring, .tvdd__ring-dot {
position: absolute;
}
.tvdd__ring-dots {
animation: pivot 1s linear infinite;
width: 100%;
height: 100%;
}
.tvdd__ring-dot {
animation: pulse 1s ease-in-out infinite;
background-color: hsl(193deg, 90%, 55%);
border-radius: 50%;
margin: -5% 0 0 -5%;
width: 10%;
height: 10%;
}
.tvdd__ring-dot:nth-child(1) {
top: 38.3531429704%;
left: 6.533337817%;
}
.tvdd__ring-dot:nth-child(2) {
animation-delay: -0.0833333333s;
top: 61.6468570296%;
left: 6.533337817%;
}
.tvdd__ring-dot:nth-child(3) {
animation-delay: -0.1666666667s;
top: 81.8198051534%;
left: 18.1801948466%;
}
.tvdd__ring-dot:nth-child(4) {
animation-delay: -0.25s;
top: 93.466662183%;
left: 38.3531429704%;
}
.tvdd__ring-dot:nth-child(5) {
animation-delay: -0.3333333333s;
top: 93.466662183%;
left: 61.6468570296%;
}
.tvdd__ring-dot:nth-child(6) {
animation-delay: -0.4166666667s;
top: 81.8198051534%;
left: 81.8198051534%;
}
.tvdd__ring-dot:nth-child(7) {
animation-delay: -0.5s;
top: 61.6468570296%;
left: 93.466662183%;
}
.tvdd__ring-dot:nth-child(8) {
animation-delay: -0.5833333333s;
top: 38.3531429704%;
left: 93.466662183%;
}
.tvdd__ring-dot:nth-child(9) {
animation-delay: -0.6666666667s;
top: 18.1801948466%;
left: 81.8198051534%;
}
.tvdd__ring-dot:nth-child(10) {
animation-delay: -0.75s;
top: 6.533337817%;
left: 61.6468570296%;
}
.tvdd__ring-dot:nth-child(11) {
animation-delay: -0.8333333333s;
top: 6.533337817%;
left: 38.3531429704%;
}
.tvdd__ring-dot:nth-child(12) {
animation-delay: -0.9166666667s;
top: 18.1801948466%;
left: 18.1801948466%;
}
.tvdd__ring:nth-child(2) {
transform: rotate(120deg);
}
.tvdd__ring:nth-child(2) .tvdd__ring-dot {
background-color: hsl(223deg, 90%, 55%);
}
.tvdd__ring:nth-child(3) {
transform: rotate(240deg);
}
.tvdd__ring:nth-child(3) .tvdd__ring-dot {
background-color: hsl(253deg, 90%, 55%);
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(223deg, 10%, 10%);
}
}
/* Animations */
@keyframes pivot {
from {
transform: rotate(0);
}
to {
transform: rotate(30deg);
}
}
@keyframes pulse {
from, to {
transform: scale(0.1);
}
50% {
transform: scale(1);
}
}