Skip to content

Instantly share code, notes, and snippets.

Created November 3, 2014 00:32
Show Gist options
  • Save anonymous/c3b4cec0b5fd96487da7 to your computer and use it in GitHub Desktop.
Save anonymous/c3b4cec0b5fd96487da7 to your computer and use it in GitHub Desktop.
A Pen by Ana Tudor.

Collection of animated loaders

Inspired by this article, except I've tried to create one element (no cheating with pseudos) versions. Not meant to reproduce the loaders in the article exactly and may have poorer browser support.

A Pen by Ana Tudor on CodePen.

License.

<div class='loader loader--audioWave'></div>
<div class='loader loader--snake'></div>
<div class='loader loader--spinningDisc'></div>
<div class='loader loader--glisteningWindow'></div>
<div class='loader loader--circularSquare'></div>
@import "compass/css3";
body {
min-height: 32em;
background: gainsboro;
}
.loader {
margin: 5em auto;
&--audioWave {
$bg-list: ();
$size-list: ();
$n-bars: 5;
$bar-top-c: #9b59b6;
$bar-bottom-c: $bar-top-c;
$bar-w: .5em;
$bar-h: 2em;
$bar-space: .125em;
@for $i from 0 to $n-bars {
$bg-list: $bg-list,
linear-gradient($bar-top-c, $bar-bottom-c)
if($i > 0, $i*($bar-w + $bar-space), 0) 50%;
$size-list: $size-list, $bar-w $bar-h/8;
}
width: $n-bars*$bar-w + ($n-bars - 1)*$bar-space;
height: $bar-h;
background: $bg-list;
background-repeat: no-repeat;
background-size: $size-list;
animation: audioWave 1.5s linear infinite;
@at-root {
@keyframes audioWave {
@for $i from 0 to $n-bars {
#{25% + $i*100%/8} {
$bg-list: ();
$size-list: ();
$bar-full-exp-top-c: #3498db;
$bar-full-exp-bottom-c: $bar-full-exp-top-c;
@for $j from 0 to $n-bars {
$bar-curr-top-c: $bar-top-c;
$bar-curr-bottom-c: $bar-bottom-c;
$bar-curr-h: $bar-h/8;
@if $i == $j {
$bar-curr-top-c: $bar-full-exp-top-c;
$bar-curr-bottom-c: $bar-full-exp-bottom-c;
$bar-curr-h: $bar-h;
}
$bg-list: $bg-list,
linear-gradient($bar-curr-top-c, $bar-curr-bottom-c)
if($j > 0, $j*($bar-w + $bar-space), 0) 50%;
$size-list: $size-list,
$bar-w $bar-curr-h;
}
background: $bg-list;
background-repeat: no-repeat;
background-size: $size-list;
}
}
}
}
}
&--snake {
$n: 5;
$d: 1.25em;
$space: .125em;
$sh-list: ();
$base-angle: 360deg/$n;
$sh-c: rgba(0,0,0,.52);
@for $i from 0 to $n {
$curr-angle: $i*$base-angle;
$curr-c: mix(#3498db, #f1c40f, ($i + .5)/$n*100%);
$x: ($i + 1)*($d + $space);
$y: $d/4*sin($curr-angle);
$sh-list: $sh-list,
$x $y $curr-c, $x (-$y) $d/2 (-$d/4) $sh-c;
}
width: $d; height: $d;
border-radius: 50%;
transform: translate(-($n + 1)*($d + $space)/2);
box-shadow: $sh-list;
animation: snake 2s linear infinite;
@at-root {
@keyframes snake {
@for $j from 0 through $n {
#{$j*100%/$n} {
$sh-list: ();
@for $i from 0 to $n {
$curr-angle: ($i + $j)*$base-angle;
$curr-c: mix(#3498db, #f1c40f, (($i + $j)%$n + .5)/$n*100%);
$x: ($i + 1)*($d + $space);
$y: $d/4*sin($curr-angle);
$sh-list: $sh-list,
$x $y $curr-c, $x (-$y) $d/2 (-$d/4) $sh-c;
}
box-shadow: $sh-list;
}
}
}
}
}
&--spinningDisc {
$d: 2em;
$bw: .5em;
$ccp: #3498db;
$ccs: #2ecc71;
$bcp: #9b59b6;
$bcs: $ccp;
border: solid $bw $bcp;
border-right-color: transparent;
border-left-color: transparent;
padding: $bw;
width: $d; height: $d;
border-radius: 50%;
background: $ccp;
background-clip: content-box;
animation: spinDisc 1.5s linear infinite;
@at-root {
@keyframes spinDisc {
50% {
border-top-color: $bcs;
border-bottom-color: $bcs;
background-color: $ccs;
}
100% { transform: rotate(1turn); }
}
}
}
&--glisteningWindow {
$d: .25em;
$k: 4;
$sh-list: ();
$c-list: #2ecc71 #9b59b6 #3498db #f1c40f;
$n: length($c-list);
$base-angle:360deg/$n;
@for $i from 0 to $n {
$curr-angle: ($i + .5)*$base-angle;
$sh-list: $sh-list,
$k*$d*cos($curr-angle) $k*$d*sin($curr-angle)
0 $d*sin($i*$base-angle/2)
nth($c-list, $i + 1);
}
width: $d; height: $d;
box-shadow: $sh-list;
animation: gw 1s ease-in-out infinite, rot 2.8s linear infinite;
@at-root {
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes gw {
@for $j from 0 through $n {
#{$j*100%/$n} {
$sh-list: ();
@for $i from 0 to $n {
$curr-angle: ($i + .5)*$base-angle;
$sh-list: $sh-list,
$k*$d*cos($curr-angle) $k*$d*sin($curr-angle)
0 $d/2 + abs(3*$d/2*sin(($j + $i)*$base-angle/2))
nth($c-list, $i + 1);
}
box-shadow: $sh-list;
}
}
}
}
}
&--circularSquare {
$d: 1.25em;
$ic: #9b59b6;
$tlc: #2ecc71;
$trc: #e74c3c;
$blc: #3498db;
$brc: #f1c40f;
width: 0; height: 0;
box-shadow: -$d/2 (-$d/2) 0 $d/2 $ic, $d/2 (-$d/2) 0 $d/2 $ic,
-$d/2 $d/2 0 $d/2 $ic, $d/2 $d/2 0 $d/2 $ic;
animation: circSquare 1.5s ease-in-out infinite;
@at-root {
@keyframes circSquare {
50% {
width: $d; height: $d;
border-radius: 50%;
transform: rotate(.5turn);
box-shadow: -2*$d 0 0 $tlc, 2*$d 0 0 $trc,
-2*$d 0 0 $blc, 2*$d 0 0 $brc;
}
80%, 100% { transform: rotate(1turn); }
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment