.wrap
- (1..3).each do |i|
.loading
View Compiled
@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;
}
}
}
View Compiled
/*
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
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.