1132 lines
227 KiB
CSS
1132 lines
227 KiB
CSS
body {
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
grid-gap: 2em;
|
|
grid-template-columns: repeat(auto-fill, 5em);
|
|
place-content: center;
|
|
margin: 0;
|
|
padding: 2em;
|
|
min-height: 100vh;
|
|
background: repeating-linear-Gradient(45deg, #131313 0 2px, #000 0 7px);
|
|
}
|
|
|
|
header {
|
|
grid-column: 1/ -1;
|
|
color: #eee;
|
|
font: 1em/ 1.375 segoe script, purisa, comic sans ms, cursive;
|
|
text-align: center;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
small {
|
|
display: block;
|
|
font-style: italic;
|
|
font-size: .375em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.load {
|
|
position: relative;
|
|
width: 5em;
|
|
height: 5em;
|
|
border-radius: 50%;
|
|
-webkit-mask: var(--mask);
|
|
mask: var(--mask);
|
|
}
|
|
.load::before, .load::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
border-radius: inherit;
|
|
-webkit-mask: var(--mask);
|
|
mask: var(--mask);
|
|
}
|
|
|
|
#load-1 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-2 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-2::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-3 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-4 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-4::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
content: "";
|
|
}
|
|
|
|
#load-5 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
|
|
#load-6 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-6::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-7 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-8 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-8::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-9 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-10 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-10::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
content: "";
|
|
}
|
|
|
|
#load-11 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
|
|
#load-12 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-12::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-13 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-14 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-14::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-15 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-16 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-16::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
content: "";
|
|
}
|
|
|
|
#load-17 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
|
|
#load-18 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-18::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-19 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-20 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-20::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-21 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-22 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-22::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
content: "";
|
|
}
|
|
|
|
#load-23 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
|
|
#load-24 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-24::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-25 {
|
|
background: radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
|
|
--c: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-25::before, #load-25:after {
|
|
-webkit-transform: rotate(var(--az, 30deg));
|
|
transform: rotate(var(--az, 30deg));
|
|
background: inherit;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-25::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-26 {
|
|
background: radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
|
|
--c: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-26::before, #load-26:after {
|
|
-webkit-transform: rotate(var(--az, 30deg));
|
|
transform: rotate(var(--az, 30deg));
|
|
background: inherit;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-26::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-27 {
|
|
background: radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(var(--c) calc(69% - 1px), transparent 69%) 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
|
|
--c: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-27::before, #load-27:after {
|
|
-webkit-transform: rotate(var(--az, 30deg));
|
|
transform: rotate(var(--az, 30deg));
|
|
background: inherit;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-27::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-28 {
|
|
background: radial-Gradient(at 50% 100%, var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 100% 50%, var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(at 50% 0, var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 0 50%, var(--c) calc(69% - 1px), transparent 69%) 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
|
|
--c: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-28::before, #load-28:after {
|
|
-webkit-transform: rotate(var(--az, 30deg));
|
|
transform: rotate(var(--az, 30deg));
|
|
background: inherit;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-28::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-29 {
|
|
background: radial-Gradient(at 50% 100%, var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 100% 50%, var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(at 50% 0, var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 0 50%, var(--c) calc(69% - 1px), transparent 69%) 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
|
|
--c: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-29::before, #load-29:after {
|
|
-webkit-transform: rotate(var(--az, 30deg));
|
|
transform: rotate(var(--az, 30deg));
|
|
background: inherit;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-29::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-30 {
|
|
background: radial-Gradient(at 50% 100%, var(--c) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 100% 50%, var(--c) calc(69% - 1px), transparent 69%) 0, radial-Gradient(at 50% 0, var(--c) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 0 50%, var(--c) calc(69% - 1px), transparent 69%) 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
|
|
--c: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-30::before, #load-30:after {
|
|
-webkit-transform: rotate(var(--az, 30deg));
|
|
transform: rotate(var(--az, 30deg));
|
|
background: inherit;
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-30::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-31 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-32 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-32::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-33 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-34 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-34::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
content: "";
|
|
}
|
|
|
|
#load-35 {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
|
|
#load-36 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-36::before {
|
|
background: HSL(var(--hue, 0deg), 85%, 65%);
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-37 {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-38 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
#load-38::before {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 100%, 35%) 30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-39 {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-40 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
#load-40::before {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 100%, 35%) 30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
content: "";
|
|
}
|
|
|
|
#load-41 {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 100%, 35%) 30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
|
|
#load-42 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(transparent 1.25em, red 0), linear-Gradient(0deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(30deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(60deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(90deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(120deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(150deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(180deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(210deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(240deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(270deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(300deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px)), linear-Gradient(330deg, transparent calc(50% - 0.125em - 1px), red calc(50% - 0.125em) calc(50% + 0.125em), transparent calc(50% - 0.125em + 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-42::before {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 100%, 35%) 30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-43 {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-44 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
#load-44::before {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 100%, 35%) 30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-45 {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 100%, 35%) 30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-46 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
#load-46::before {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 100%, 35%) 30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
content: "";
|
|
}
|
|
|
|
#load-47 {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 100%, 35%) 30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
|
|
#load-48 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), radial-Gradient(red 1.25em, transparent 0), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-48::before {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 100%, 35%) 30deg, HSL(30deg, 100%, 35%) 0 60deg, HSL(60deg, 100%, 35%) 0 90deg, HSL(90deg, 100%, 35%) 0 120deg, HSL(120deg, 100%, 35%) 0 150deg, HSL(150deg, 100%, 35%) 0 180deg, HSL(180deg, 100%, 35%) 0 210deg, HSL(210deg, 100%, 35%) 0 240deg, HSL(240deg, 100%, 35%) 0 270deg, HSL(270deg, 100%, 35%) 0 300deg, HSL(300deg, 100%, 35%) 0 330deg, HSL(330deg, 100%, 35%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-49 {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-50 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
#load-50::before {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-51 {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-52 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
#load-52::before {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
content: "";
|
|
}
|
|
|
|
#load-53 {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
|
|
#load-54 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-54::before {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-55 {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-56 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
#load-56::before {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-57 {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-58 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: a 1s steps(12) infinite;
|
|
animation: a 1s steps(12) infinite;
|
|
}
|
|
#load-58::before {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
content: "";
|
|
}
|
|
|
|
#load-59 {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
|
|
#load-60 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-Gradient(red, red), linear-Gradient(0deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(30deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(60deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(90deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(120deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(150deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(180deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(210deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(240deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(270deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(300deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(330deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-60::before {
|
|
background: conic-Gradient(from 0deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from var(--a, 0deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-61 {
|
|
--az: 0deg;
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-61, #load-61::before, #load-61::after {
|
|
background: radial-Gradient(HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
|
|
}
|
|
#load-61::before, #load-61:after {
|
|
--az: 30deg;
|
|
-webkit-transform: rotate(var(--az));
|
|
transform: rotate(var(--az));
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-61::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-62 {
|
|
--az: 0deg;
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-62, #load-62::before, #load-62::after {
|
|
background: radial-Gradient(HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
|
|
}
|
|
#load-62::before, #load-62:after {
|
|
--az: 30deg;
|
|
-webkit-transform: rotate(var(--az));
|
|
transform: rotate(var(--az));
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-62::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-63 {
|
|
--az: 0deg;
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-63, #load-63::before, #load-63::after {
|
|
background: radial-Gradient(HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 1.58494em, 1.58494em 0.79247em;
|
|
}
|
|
#load-63::before, #load-63:after {
|
|
--az: 30deg;
|
|
-webkit-transform: rotate(var(--az));
|
|
transform: rotate(var(--az));
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-63::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-64 {
|
|
--az: 0deg;
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-64, #load-64::before, #load-64::after {
|
|
background: radial-Gradient(at 50% 100%, HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 0 50%, HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(at 50% 0, HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 100% 50%, HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
|
|
}
|
|
#load-64::before, #load-64:after {
|
|
--az: 30deg;
|
|
-webkit-transform: rotate(var(--az, 30deg));
|
|
transform: rotate(var(--az, 30deg));
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-64::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-65 {
|
|
--az: 0deg;
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-65, #load-65::before, #load-65::after {
|
|
background: radial-Gradient(at 50% 100%, HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 0 50%, HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(at 50% 0, HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 100% 50%, HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
|
|
}
|
|
#load-65::before, #load-65:after {
|
|
--az: 30deg;
|
|
-webkit-transform: rotate(var(--az, 30deg));
|
|
transform: rotate(var(--az, 30deg));
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-65::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-66 {
|
|
--az: 0deg;
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-66, #load-66::before, #load-66::after {
|
|
background: radial-Gradient(at 50% 100%, HSL(var(--az), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 0, radial-Gradient(at 0 50%, HSL(calc(var(--az) + 90deg), 85%, 65%) calc(69% - 1px), transparent 69%) 100%, radial-Gradient(at 50% 0, HSL(calc(var(--az) + 180deg), 85%, 65%) calc(69% - 1px), transparent 69%) 50% 100%, radial-Gradient(at 100% 50%, HSL(calc(var(--az) + 270deg), 85%, 65%) calc(69% - 1px), transparent 69%) 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 0.79247em 0.79247em, 0.79247em 0.79247em;
|
|
}
|
|
#load-66::before, #load-66:after {
|
|
--az: 30deg;
|
|
-webkit-transform: rotate(var(--az, 30deg));
|
|
transform: rotate(var(--az, 30deg));
|
|
-webkit-mask: none;
|
|
mask: none;
|
|
content: "";
|
|
}
|
|
#load-66::after {
|
|
--az: -30deg;
|
|
}
|
|
|
|
#load-67 {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg ), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-68 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-68::before {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 30deg, RGBA(0, 0, 0, 0.09091) 0deg 60deg, RGBA(0, 0, 0, 0.18182) 0deg 90deg, RGBA(0, 0, 0, 0.27273) 0deg 120deg, RGBA(0, 0, 0, 0.36364) 0deg 150deg, RGBA(0, 0, 0, 0.45455) 0deg 180deg, RGBA(0, 0, 0, 0.54545) 0deg 210deg, RGBA(0, 0, 0, 0.63636) 0deg 240deg, RGBA(0, 0, 0, 0.72727) 0deg 270deg, RGBA(0, 0, 0, 0.81818) 0deg 300deg, RGBA(0, 0, 0, 0.90909) 0deg 330deg, RGBA(0, 0, 0, 1) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
#load-69 {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
|
|
#load-70 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
animation: hue 12s linear infinite, a 1s steps(12) infinite;
|
|
}
|
|
#load-70::before {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, 0) 240deg, RGBA(0, 0, 0, 0.25) 210deg 270deg, RGBA(0, 0, 0, 0.5) 210deg 300deg, RGBA(0, 0, 0, 0.75) 210deg 330deg, RGBA(0, 0, 0, 1) 210deg 360deg);
|
|
content: "";
|
|
}
|
|
|
|
#load-71 {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg ), linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: source-in, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor;
|
|
mask-composite: intersect, exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
|
|
#load-72 {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
--mask: linear-gradient(#ff0000, #ff0000), linear-Gradient(15deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(45deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(75deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(105deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(135deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(165deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(195deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(225deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(255deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(285deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(315deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-Gradient(345deg, transparent calc(50% - 1px - 1px), red calc(50% - 1px) calc(50% + 1px), transparent calc(50% - 1px + 1px)), linear-gradient(#ff0000, #ff0000), radial-Gradient(red 1.97169em, transparent 0), radial-Gradient(circle at calc(50% + 1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + 1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + 1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + 0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.97169em) calc(50% + 0em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + -0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0em) calc(50% + -1.97169em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 0.98584em) calc(50% + -1.70753em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px)), radial-Gradient(circle at calc(50% + 1.70753em) calc(50% + -0.98584em), red calc(0.52831em - 2px), transparent calc(0.52831em - 1px));
|
|
-webkit-mask-composite: xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, xor, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
|
|
mask-composite: exclude, add, add, add, add, add, add, add, add, add, add, add, add, exclude, add, add, add, add, add, add, add, add, add, add, add, add, add;
|
|
-webkit-animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
animation: hue 12s linear infinite, alpha0 1s steps(1) -0.5s infinite alternate, alpha1 1s steps(1) -0.45833s infinite alternate, alpha2 1s steps(1) -0.41667s infinite alternate, alpha3 1s steps(1) -0.375s infinite alternate, alpha4 1s steps(1) -0.33333s infinite alternate, alpha5 1s steps(1) -0.29167s infinite alternate, alpha6 1s steps(1) -0.25s infinite alternate, alpha7 1s steps(1) -0.20833s infinite alternate, alpha8 1s steps(1) -0.16667s infinite alternate, alpha9 1s steps(1) -0.125s infinite alternate, alpha10 1s steps(1) -0.08333s infinite alternate, alpha11 1s steps(1) -0.04167s infinite alternate;
|
|
}
|
|
#load-72::before {
|
|
background: conic-Gradient(from -15deg, HSL(0deg, 85%, 65%) 30deg, HSL(30deg, 85%, 65%) 0 60deg, HSL(60deg, 85%, 65%) 0 90deg, HSL(90deg, 85%, 65%) 0 120deg, HSL(120deg, 85%, 65%) 0 150deg, HSL(150deg, 85%, 65%) 0 180deg, HSL(180deg, 85%, 65%) 0 210deg, HSL(210deg, 85%, 65%) 0 240deg, HSL(240deg, 85%, 65%) 0 270deg, HSL(270deg, 85%, 65%) 0 300deg, HSL(300deg, 85%, 65%) 0 330deg, HSL(330deg, 85%, 65%) 0 );
|
|
--mask: conic-Gradient(from calc(var(--a, 0deg) - 15deg), RGBA(0, 0, 0, var(--alpha0)) 30deg, RGBA(0, 0, 0, var(--alpha1)) 0deg 60deg, RGBA(0, 0, 0, var(--alpha2)) 0deg 90deg, RGBA(0, 0, 0, var(--alpha3)) 0deg 120deg, RGBA(0, 0, 0, var(--alpha4)) 0deg 150deg, RGBA(0, 0, 0, var(--alpha5)) 0deg 180deg, RGBA(0, 0, 0, var(--alpha6)) 0deg 210deg, RGBA(0, 0, 0, var(--alpha7)) 0deg 240deg, RGBA(0, 0, 0, var(--alpha8)) 0deg 270deg, RGBA(0, 0, 0, var(--alpha9)) 0deg 300deg, RGBA(0, 0, 0, var(--alpha10)) 0deg 330deg, RGBA(0, 0, 0, var(--alpha11)) 0deg );
|
|
content: "";
|
|
}
|
|
|
|
@-webkit-keyframes hue {
|
|
to {
|
|
--hue: 360deg;
|
|
}
|
|
}
|
|
|
|
@keyframes hue {
|
|
to {
|
|
--hue: 360deg;
|
|
}
|
|
}
|
|
@-webkit-keyframes a {
|
|
to {
|
|
--a: 360deg;
|
|
}
|
|
}
|
|
@keyframes a {
|
|
to {
|
|
--a: 360deg;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha0 {
|
|
50% {
|
|
--alpha0: 1;
|
|
}
|
|
}
|
|
@keyframes alpha0 {
|
|
50% {
|
|
--alpha0: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha1 {
|
|
50% {
|
|
--alpha1: 1;
|
|
}
|
|
}
|
|
@keyframes alpha1 {
|
|
50% {
|
|
--alpha1: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha2 {
|
|
50% {
|
|
--alpha2: 1;
|
|
}
|
|
}
|
|
@keyframes alpha2 {
|
|
50% {
|
|
--alpha2: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha3 {
|
|
50% {
|
|
--alpha3: 1;
|
|
}
|
|
}
|
|
@keyframes alpha3 {
|
|
50% {
|
|
--alpha3: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha4 {
|
|
50% {
|
|
--alpha4: 1;
|
|
}
|
|
}
|
|
@keyframes alpha4 {
|
|
50% {
|
|
--alpha4: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha5 {
|
|
50% {
|
|
--alpha5: 1;
|
|
}
|
|
}
|
|
@keyframes alpha5 {
|
|
50% {
|
|
--alpha5: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha6 {
|
|
50% {
|
|
--alpha6: 1;
|
|
}
|
|
}
|
|
@keyframes alpha6 {
|
|
50% {
|
|
--alpha6: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha7 {
|
|
50% {
|
|
--alpha7: 1;
|
|
}
|
|
}
|
|
@keyframes alpha7 {
|
|
50% {
|
|
--alpha7: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha8 {
|
|
50% {
|
|
--alpha8: 1;
|
|
}
|
|
}
|
|
@keyframes alpha8 {
|
|
50% {
|
|
--alpha8: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha9 {
|
|
50% {
|
|
--alpha9: 1;
|
|
}
|
|
}
|
|
@keyframes alpha9 {
|
|
50% {
|
|
--alpha9: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha10 {
|
|
50% {
|
|
--alpha10: 1;
|
|
}
|
|
}
|
|
@keyframes alpha10 {
|
|
50% {
|
|
--alpha10: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes alpha11 {
|
|
50% {
|
|
--alpha11: 1;
|
|
}
|
|
}
|
|
@keyframes alpha11 {
|
|
50% {
|
|
--alpha11: 1;
|
|
}
|
|
} |