Skip to content

Instantly share code, notes, and snippets.

@cheerly
Created September 10, 2017 18:15
Show Gist options
  • Save cheerly/65272468190656b28a7df326d07471ef to your computer and use it in GitHub Desktop.
Save cheerly/65272468190656b28a7df326d07471ef to your computer and use it in GitHub Desktop.
Color Wheel Preloader

Color Wheel Preloader

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.

License.

<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);
}
}
@cheerly
Copy link
Author

cheerly commented Jan 17, 2018

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment