scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Lint

Browse source
This commit is contained in:
Ray Schamp 2015-11-03 19:02:28 -05:00
parent 1304f9e7ba
commit 6f50282fc3
1 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/spinner/spinner.scss
View file

@ -1,25 +1,27 @@
@import "../../colors";
.spinner { .spinner {
position: relative;
width: 20px; width: 20px;
height: 20px; height: 20px;
position: relative;
.circle { .circle {
position: absolute;
top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute;
left: 0;
top: 0;
&:before { &:before {
content: '';
display: block; display: block;
animation: circleFadeDelay 1.2s infinite ease-in-out both;
margin: 0 auto; margin: 0 auto;
border-radius: 100%;
background-color: $overlay-gray;
width: 15%; width: 15%;
height: 15%; height: 15%;
background-color: #333; content: "";
border-radius: 100%;
-webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both; -webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both;
animation: circleFadeDelay 1.2s infinite ease-in-out both;
} }
} }
@ -27,13 +29,13 @@
$rotation: 30deg * ($i - 1); $rotation: 30deg * ($i - 1);
$delay: -1.3s + $i * .1; $delay: -1.3s + $i * .1;
.circle#{$i} { .circle#{$i} {
-webkit-transform: rotate($rotation);
-ms-transform: rotate($rotation);
transform: rotate($rotation); transform: rotate($rotation);
-ms-transform: rotate($rotation);
-webkit-transform: rotate($rotation);
} }
.circle#{$i}:before { .circle#{$i}:before {
-webkit-animation-delay: $delay;
animation-delay: $delay; animation-delay: $delay;
-webkit-animation-delay: $delay;
} }
} }
@ -42,4 +44,4 @@
@keyframes circleFadeDelay { @keyframes circleFadeDelay {
0%, 39%, 100% { opacity: 0; } 0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; } 40% { opacity: 1; }
} }