A Pen by Mark Ni.

CSS3-Persona-3-Loading-Animation.markdown

CSS3 Persona 3 Loading Animation

A Pen by Mark Ni on CodePen.

License.

index.html

<div class="outer">
  <div class="inner"></div>  
</div>

<div class="control">
<button onclick="hide()">Click to Hide</button>

<button onclick="show()">Click to Show</button>
</div>

script.js

//WTFPL version 2

//related stackoverflow question: http://stackoverflow.com/questions/20624255/css3-transform-porblem-with-rotate-and-rotatey-working-together

//when loading finish, add .hide class via Javascript.

var hide = function(){
  document.getElementsByClassName('inner')[0].className = "inner hide";
}

//show has no animation though
var show = function(){
  document.getElementsByClassName('inner')[0].className = "inner";
}

style.scss

@import "compass";
body{
  background-color:black;
  color:white;
}


//asin and acos helper functions. code from: http://codepen.io/vennsoh/pen/AejCc
@function asin($value, $precision: 25) { 
  $coeff: 1;
  $sum: 0;
  $flag: 0;
  $sign: 1;
  
  @if abs($value) > 1/sqrt(2) {
    $flag: 1;
    $sign: $value/abs($value);
    $value: sqrt(1 - pow($value, 2));
  }
  
  $sum: $sum + $coeff*$value;
  
  @for $i from 1 through $precision {
    $coeff: $coeff*(2*$i - 1)/(2*$i);
    $sum: $sum + $coeff*pow($value, 2*$i + 1)/(2*$i + 1);
  }
  
  @return $sign*($flag*pi()/2 + pow(-1, $flag)*$sum);
}

@function acos($value, $precision: 25) {
  @return pi()/2 - asin($value, $precision);
}


//config here
$width: 50 ;
$height: 70 ;
$rotate-direction: -1;


//auto calculate the degree of rotation so that top right coner will have the same x-cord as left bottom coner. (Law of cosines) Using deg here as it's more human readable.

$degree: $rotate-direction * (acos($height / sqrt($width * $width + $height * $height)) * 57.2957795);





@mixin keyframes($animationName) {
  @-webkit-keyframes $animationName {
    @content;
  }
  @-moz-keyframes $animationName {
    @content;
  }
  @-o-keyframes $animationName {
    @content;
  }
  @keyframes $animationName {
    @content;
  }
}


@include keyframes( flip){
  
  //breaks into 2 frames so it will have nice ease-in-out effect in each half spin
  //you don't have to do this.
  
  50%{
      @include transform(rotateY(180deg));
  }
  

  100%{
      @include transform(rotateY(360deg));
  }

};

.inner {

  @include transform(rotate(#{$degree}deg));
  margin:100px auto;
  width:#{$width}px;
  height:#{$height}px;
  background-color:#246eb7;
  
}

.outer {
  -webkit-animation:  flip 1s ease-in-out infinite;
  -moz-animation:  flip 1s ease-in-out infinite;
  -o-animation:  flip 1s ease-in-out infinite;
  animation:  flip 1s ease-in-out infinite;
  

}


@include keyframes(hide){
  

  0%{
      @include transform(rotate(#{$degree}deg) scale(1));
  }
  

  100%{
      @include transform(rotate(#{$degree}deg) scale(0));
  }

};


.inner.hide {
  -webkit-animation:  hide 0.5s ease-in;
  -moz-animation: hide 0.5s ease-in;
  -o-animation:  hide 0.5s ease-in;
  animation:  hide 0.5s ease-in;
  @include transform(rotate(#{$degree}deg) scale(0));

}

.control{
  
  text-align:center;
}


//hide in codepen preview because the buttons are ugly :)
@media (min-width: 850px) and (max-width: 870px) {
.control{
  
  display:none;
}
}