Trying to use SCSS to make a loading spinner. I know I am not using SCSS quite effectively yet, still practicing!
A Pen by cindy massey on CodePen.
Trying to use SCSS to make a loading spinner. I know I am not using SCSS quite effectively yet, still practicing!
A Pen by cindy massey on CodePen.
<div class="loader"> | |
<div class="bar"></div> | |
<div class="bar"></div> | |
<div class="bar"></div> | |
<div class="bar"></div> | |
<div class="bar"></div> | |
<div class="bar"></div> | |
<div class="bar"></div> | |
<div class="bar"></div> | |
<div class="bar"></div> | |
<div class="bar"></div> | |
<div class="bar"></div> | |
<div class="bar"></div> | |
</div> | |
<div class="circle"></div> |
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> |
$barCount: 12; | |
@keyframes loader-spin{ | |
0% { transform: translate(-50%, -50%) rotate(0deg)} | |
100% { transform: translate(-50%, -50%) rotate(360deg)} | |
} | |
body{ | |
display: flex; | |
flex: 1; | |
margin: 0; | |
padding: 0; | |
width: 100vw; | |
height: 100vh; | |
background-color: #1a1a1a; | |
} | |
.loader { | |
animation: loader-spin 5s linear infinite; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
@keyframes circle-anim { | |
0% { | |
transform: translate(-50%, -50%) scale(1,1); | |
} | |
25% { | |
transform: translate(-50%, -50%) scale(1.3,1.3); | |
} | |
50% { | |
transform: translate(-50%, -50%) scale(.85,.85); | |
} | |
75% { | |
transform: translate(-50%, -50%) scale(1.2,1.2); | |
} | |
100% { | |
transform: translate(-50%, -50%) scale(1,1); | |
} | |
} | |
.circle{ | |
animation: circle-anim 10s ease infinite; | |
width: 70px; | |
height: 70px; | |
border-radius: 50%; | |
background-color: inherit; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.bar { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
width: 10px; | |
height: 70px; | |
border-radius: 10px; | |
} | |
$colors: ( | |
1: #FF7F00, 2: #FFFF00, | |
3: #7FFF00, 4: #00FF00, 5: #00FF7F, | |
6: #00FFFF, 7: #007FFF, 8: #0000FF, | |
9: #7F00FF, 10: #FF00FF, 11: #FF007F, | |
12: #FF0000, | |
); | |
@mixin bar-transform($i){ | |
transform: translate(-50%, -100%) rotate($i * 30deg); | |
} | |
@for $i from 1 through $barCount { | |
@keyframes bar-anim-#{$i} { | |
0% { | |
transform: translate(-50%, -100%) rotate($i * 30deg) scale(1,1); | |
} | |
20% { | |
transform: translate(-50%, -100%) rotate($i * 30deg) scale(1.1,1.2); | |
} | |
40% { | |
transform: translate(-50%, -100%) rotate($i * 30deg) scale(1,1.1); | |
// filter: brightness(150%); | |
opacity: .7; | |
} | |
60% { | |
transform: translate(-50%, -100%) rotate($i * 30deg) scale(1.2,1.25); | |
opacity: .5; | |
} | |
80% { | |
transform: translate(-50%, -100%) rotate($i * 30deg) scale(1.3,1.1); | |
// filter: brightness(50%); | |
opacity: 1; | |
} | |
100% { | |
transform: translate(-50%, -100%) rotate($i * 30deg) scale(1,1); | |
} | |
} | |
} | |
@mixin bar-anim($i){ | |
animation: bar-anim-#{$i} 2s $i*0.3s ease infinite; | |
} | |
@for $i from 1 through $barCount { | |
.bar:nth-child(#{$i}) { | |
background-color: map-get($colors, $i); | |
@include bar-transform($i); | |
transform-origin: 50% 100%; | |
@include bar-anim($i); | |
} | |
} |
[****]([url](url
))