.wrap
	- (1..3).each do |i|
		.loading

@import "compass/css3";

$backgroundColor:rgba(51,51,51,1);
$logo: "http://fairwheelbikes.com/includes/templates/fwb/images/logo.png";
$logoSize: 152px;
$logoBorderColor: rgba(102,102,102,1);
$borderWidth: 15px;
$borderColor: rgba(250,134,21,1);


//Calculated
$logoRadius: $logoSize / 2;
$borderRadius: $borderWidth / 2; 
$numDots: round(( pi() * ( $logoRadius + $borderRadius ) ) / (4 * $borderRadius));

@function calc-box-shadow($numDots, $borderColor){
  
  $shadows: ();
  
  @for $i from 1 through $numDots {
    
    $radians: -((pi() / $numDots) * $i);
    $x: ($logoRadius + $borderRadius) * cos($radians);
    $y: ($logoRadius + $borderRadius) * sin($radians);
    
    $shadow: $x $y 0 0 transparentize($borderColor, $i / $numDots);
    
    $shadows:append($shadows, $shadow, comma);
    
  }
  
  @return $shadows;
  
}
@keyframes wobbleSpin {
  
  0% {
    transform: rotate(0);
  }
  16% {
    transform: rotate(168deg);
  }
  37%{
    transform: rotate(68deg);
  }
  72%{
    transform: rotate(384deg);
  }
  100%{
    transform: rotate(360deg);
  }
  
}
@keyframes pulse {
  
  0%,100% { 
  	box-shadow: 0 0 0 0 $borderColor;
  }
  50% {
    box-shadow: 0 0 10px $borderWidth $borderColor;
  }
}
@keyframes spin{

  100%{transform:rotate(360deg);}
  
}
html,
body {
  width:100%;
  height:100%;
  background:$backgroundColor;
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width:100%;
}
.loading{
  position:relative;
  height:$logoSize;
  width:$logoSize;
  border-radius:50%;
  background:url($logo) no-repeat;
  padding:0;
  margin:0 20px;
  &:after{   
  }
  &:nth-child(1){    
    border: $borderWidth solid;
    border-color:$logoBorderColor;   
    &:after{     
      content: " ";
      position:absolute;
      height:$logoSize;
      width:$logoSize;
      border-radius:50%;
      top: -$borderWidth;
      left: -$borderWidth;
      border: $borderWidth solid transparent;
      border-left-color: $borderColor;
      border-right-color: $borderColor;
      animation: wobbleSpin 2s ease-in-out infinite;
      padding:0;
    
    }
  }
    &:nth-child(2){   
      border: $borderWidth solid transparent;     
      &:after{
        content: " ";
        position:absolute;
        top:0;
        left:0;
        height:$logoSize;
        width:$logoSize;
        border-radius:50%;
        border: 0 solid $borderColor;
        animation:pulse 1.5s infinite ease-out;
      }
  }
    &:nth-child(3){    
    &:after{
        content: " ";
        position:absolute;
      	border-radius:50%;
        top:($logoSize - $borderWidth) / 2;
        left:($logoSize - $borderWidth) / 2 ;
        height:$borderWidth;
        width:$borderWidth;
        box-shadow: calc-box-shadow($numDots, $borderColor);
			 animation:spin 1s infinite linear;
    }
  }  
}

/*
This is meant to be a quick loading icon explore for Fairwheel
Bikes.  I attempted to keep it as flexible as possible easily swapping out round logos, sizes and colors for reusability.  Please fork and play. 

The base calculation for $numDots came from this white paper: http://lasi.lynchburg.edu/peterson_km/public/Gov2010/foxy2/pdfs/2DProof.pdf

Inspiration for the first two loaders came from Leland's work on this pen: https://codepen.io/LelandKwong/details/clbJo

*/