forked from a1gard/xshop
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.
132 lines
2.6 KiB
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);
|
||
|
|
}
|
||
|
|
}
|