mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-11-24 14:10:27 +00:00
78 lines
2.3 KiB
SCSS
78 lines
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; }
|
||
|
|
}
|
||
|
|
}
|