Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Loader #3. Rotation forms
.loader-wrap
.loader-circles
- for(i=0; i < 10; i++)
.circle

Loader #3. Rotation forms

Got inspirated by on of the pens and made that simple, but cool loader :)

A Pen by Slava on CodePen.

License.

.loader-wrap{
position: absolute;
left: 0;right: 0;top: 0;bottom: 0;
margin: auto;
background-color: #1dce14;
overflow: hidden;
}
.loader-circles{
$loader-size: 40px;
$loader-color: #ffffff;
$loader-speed: 10;
position: absolute;
left: 0;right: 0;top: 0;bottom: 0;
margin: auto;
transform: rotate(45deg);
width: $loader-size*5;
height: $loader-size*5;
.circle{
box-sizing: border-box;
position: absolute;
top: 0;bottom: 0;right: 0;left: 0;
margin: auto;
background-color: transparent;
border: $loader-size/10 solid $loader-color;
border-radius: 50%;
border-bottom-color: transparent;
border-right-color: transparent;
text-align: center;
@for $i from 1 through 10 {
&:nth-child(#{$i}){
width: ($loader-size*$i)/2;
height: ($loader-size*$i)/2;
animation: rotate-circle linear infinite;
animation-duration: $loader-speed/$i*1s;
}
}
}
@for $i from 0 through 9 {
@keyframes rotate-circle{
100%{
transform: rotate(360deg);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.