asteroid/bibi/wardrobe/_dress-codes/_spinner.scss
2023-12-27 22:39:56 -08:00

78 lines
No EOL
2.3 KiB
SCSS

// ================================================================================
// + Spinner
// --------------------------------------------------------------------------------
$Spinner_Size: 56px;
@keyframes Spinner_Animation-Rotate {
0% { transform: rotate( 0deg); }
100% { transform: rotate(360deg); }
}
@keyframes Spinner_Animation-Beat {
0% { transform: scale(1.00); opacity: 0.75; }
25% { transform: scale(1.25); opacity: 0.50; }
50% { transform: scale(1.00); opacity: 0.75; }
75% { transform: scale(0.80); opacity: 1.00; }
100% { transform: scale(1.00); opacity: 0.75; }
}
/*
@keyframes Spinner_Animation-Glow {
0% { @include size(3px ); opacity: 1.0; }
25% { @include size(1px ); }
50% { @include size(1px, 6px); opacity: 1.0; }
75% { @include size(1px ); }
100% { @include size(3px ); opacity: 1.0; }
}*/
@mixin Spiner-Content() {
&:before, &:after {
content: "";
display: block;
position: absolute;
box-sizing: border-box;
@include offset(0);
margin: auto;
border-radius: 50%;
opacity: 0.75;
}
&:before { // Core
@include size(24px);
background: rgba(192,192,192, 0.75);
}
&:after { // Halo
@include size(32px);
border: solid 1.5px rgba(192,192,192, 0.5);
}
span { // Bits
display: block;
position: absolute;
@include offset(0);
margin: auto;
@include size(100%);
transform-origin: 50%;
&:before {
content: "";
display: block;
@include offset(0, 0, auto);
margin: 0 auto;
border-radius: 50%;
@include size(3px);
}
$SCOPED__Spinner_HowManyBits: 12; // 0-12
@if $SCOPED__Spinner_HowManyBits > 0 {
@for $i from 1 through $SCOPED__Spinner_HowManyBits {
&:nth-child(#{$i}) {
transform: rotate(#{360deg / $SCOPED__Spinner_HowManyBits * $i});
&:before { background: darken(rgb(255,255,255), (72% / $SCOPED__Spinner_HowManyBits * $i)); }
}
}
@if $SCOPED__Spinner_HowManyBits < 12 { @for $i from $SCOPED__Spinner_HowManyBits + 1 through 12 { &:nth-child(#{$i}) { display: none; } } }
}
}
html.busy & {
& { animation: Spinner_Animation-Rotate 1.50s linear 0s infinite normal; }
&:before,
&:after { animation: Spinner_Animation-Beat 2.25s ease 0s infinite normal; }
span { animation: /*Spinner_Animation-Glow 4.00s ease-in-out 0s infinite normal*/ none; }
}
}