Loading animation with keyframe for SCSS & Jade.

index.jade

section.loaders
  span.loader.loader-quart 
  |  Loading...
section.loaders.loaders-bg-2
  span.loader.loader-double 
  |  Loading...
section.loaders.loaders-bg-3
  span.loader.loader-circles 
  |  Loading...
section.loaders.loaders-bg-4
  span.loader.loader-bars
    span 
  |  Loading...

Loading-animation-with-keyframe-for-SCSS-&-Jade..markdown

Loading animation with keyframe for SCSS & Jade.

Loading animation with keyframe for SCSS & Jade. Inspired by http://www.grafikart.fr/tutoriels/html-css/loaders-animes-496. Coding by François Lesenne http://macreart.com

A Pen by François Lesenne on CodePen.

License.

script.js

// Loading animation with keyframe for SCSS & Jade

// inspired by http://www.grafikart.fr/tutoriels/html-css/loaders-animes-496

// Coding by François Lesenne http://macreart.com

style.scss

// $Var 
$bg-color-1: #4EBA6F;
$bg-color-2: #2D95BF;
$bg-color-3: #F15A5A;
$bg-color-4: #955BA5;
$color: #fff;

// $Mixin
@mixin size($width , $height: $width ) {
  width: $width;
  height: $height;
}

@mixin fontsize($size: 24, $base: 16) {
  font-size: $size + px;
  font-size: ($size / $base) * 1rem;
}

@mixin absPosition ($top: auto, $right: auto, $bottom: auto, $left: auto) {
     position: absolute;
     top: $top;
     right: $right;
     bottom: $bottom;
     left: $left;
}

@mixin opacity($opacity) {
     opacity: $opacity;
     $opacityIE: $opacity * 100;
     filter: alpha(opacity=$opacityIE);
}

@mixin animation($animation...) {
  -o-animation: $animation;
  -moz-animation: $animation;
  -webkit-animation: $animation;
  animation: $animation;
}
/* $Base */
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
  @include fontsize(40);
	color: $color;
	text-align: center;
}

.loaders {
	height: 300px;
	line-height: 300px;
  background-color: $bg-color-1;
}

.loaders-bg-2 { background-color: $bg-color-2;}
.loaders-bg-3 { background-color: $bg-color-3;}
.loaders-bg-4 { background-color: $bg-color-4;}

.loader {
  display: inline-block;
	position: relative;
  @include size(50px);
	vertical-align: middle;
}

/*	$Loader Quadrant
	========================================================================== */

.loader-quart {
	border-radius: 50px;
	border: 6px solid rgba(255,255,255,0.4);
 &:after {
    content: '';
    @include absPosition(-6px, -6px, -6px, -6px);
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: $color;
    @include animation(spin 1s linear infinite);
 }
}

/*	$Loader Double circle
	========================================================================== */

.loader-double {
	border-radius: 50px;
	border: 6px solid transparent;
	border-top-color: $color;
	border-bottom-color: $color;
  @include animation(spin 1.5s linear infinite);
  &:before,
  &:after {
    content: '';
    @include absPosition(5px, 5px, 5px, 5px);
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: $color;
    border-bottom-color: $color;
    @include opacity(0.6);
    @include animation(spinreverse 2s linear infinite);
  }
  &:before {
    top: 15px; 
    left: 15px;
    bottom: 15px;
    right: 15px;
    @include animation(spinreverse 3s linear infinite);
  }
}

/*	$Loader Multiple circle
	========================================================================== */

.loader-circles {
	border-radius: 50px;
	border: 3px solid transparent;
	border-top-color: #fff;
  @include animation(spin 1s linear infinite);
  &:before,
  &:after {
    content: '';
    @include absPosition(5px, 5px, 5px, 5px);
    border-radius: 50px;
    border: 3px solid transparent;
    border-top-color: $color;
    @include opacity(0.8);
    @include animation(spinreverse 5s linear infinite);
  }
  &:before {
    top: 12px; 
    left: 12px;
    bottom: 12px;
    right: 12px;
    @include animation(spinreverse 10s linear infinite);
  }
}

/*	$Loader Bars
	========================================================================== */

.loader-bars:before,
.loader-bars:after,
.loader-bars span {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
  @include size(10px, 30px);
	background-color: $color;
  @include animation(grow 1.5s linear infinite);
}

.loader-bars:after {
	left: 15px;
  @include animation(grow 1.5s linear -.5s infinite);
}

.loader-bars span {
	left: 30px;
  @include animation(grow 1.5s linear -1s infinite);
}

 @-webkit-keyframes grow {
	0%{ -webkit-transform: scaleY(0); transform: scaleY(0); opacity: 0;}
	50%{ -webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1;}
	100%{ -webkit-transform: scaleY(0); transform: scaleY(0); opacity: 0;}
}

 @keyframes grow {
	0%{ -webkit-transform: scaleY(0); transform: scaleY(0); opacity: 0;}
	50%{ -webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1;}
	100%{ -webkit-transform: scaleY(0); transform: scaleY(0); opacity: 0;}
}

@-webkit-keyframes spin {
  	0%{ -webkit-transform: rotate(0deg); tranform: rotate(0deg);}
	100%{ -webkit-transform: rotate(360deg); tranform: rotate(360deg);}
}

@keyframes spin {
  	0%{ -webkit-transform: rotate(0deg); tranform: rotate(0deg);}
	100%{ -webkit-transform: rotate(360deg); tranform: rotate(360deg);}
}

@-webkit-keyframes spinreverse {
  	0%{ -webkit-transform: rotate(0deg); tranform: rotate(0deg);}
	100%{ -webkit-transform: rotate(-360deg); tranform: rotate(-360deg);}
}

@keyframes spinreverse {
  	0%{ -webkit-transform: rotate(0deg); tranform: rotate(0deg);}
	100%{ -webkit-transform: rotate(-360deg); tranform: rotate(-360deg);}
}