Loader #3. Rotation forms

index.jade

.loader-wrap
	.loader-circles
		- for(i=0; i < 10; i++)
			.circle

loader-3-rotation-forms.markdown

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.

style.scss

.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);
			}
		}
		
	}
	
}