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