SVG "Foursquare-Inspired" Loading Spinner

index.html

<div class="spinner">
<svg width="100px" height="100px" viewBox="-26 -26 100 100" class="spinner_svg">
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group" transform="translate(2.000000, 2.000000)" stroke="#FFFFFF">
            <circle id="Oval-1" stroke-width="4" cx="22.5" cy="22.5" r="22.5"></circle>
            <circle id="Oval-2" cx="22.5" cy="22.5" r="22.5" stroke-width="1.5"></circle>
            <circle id="Oval-3" cx="22.5" cy="22.5" r="22.5" stroke-width="1.5"></circle>
            <circle id="Oval-4" cx="22.5" cy="22.5" r="22.5" stroke-width="1.5"></circle>
        </g>
    </g>
</svg>
</div>

style.css

@import "lesshat";

*{
  box-sizing: border-box;
}

body{
  background: #e0e0e0;
}

// 1. Variables         =================

@floatTime:        4s;
@inital:           1;
@downstate:        0.6;
@originOne:        22.5px;
@originTwo:        22.5px;
@strokeDash:       142;

// 2. Animation-Setup   =================

.spinner_svg{
  position: relative;
  z-index: 400;
}

#Group{
  stroke-dasharray: @strokeDash;
  stroke-dashoffset: @strokeDash;
  animation: dash 8s cubic-bezier(.02,.61,.85,.98) infinite;
}

#Oval-1{
  fill: none;
  transform-origin: @originOne @originTwo;
  animation: pulsate 8s infinite;
}

#Oval-2, #Oval-3, #Oval-4{
  fill: none;
  transform-origin: @originOne @originTwo;
  opacity: 0;
}

#Oval-2{
  animation: float 8s ease 3s infinite;
}

#Oval-3{
  animation: float2 8s ease 4s infinite;
}

#Oval-4{
  animation: float3 8s ease 5s infinite;
}

.pulsateInital(@inital){
  transform: scale(@inital) ;
  animation-timing-function: cubic-bezier(0,.96,.56,.97);
}

.pulsateDownstate(){
  transform: scale(@downstate);
  animation-timing-function:ease-in;
}

// 2. Animations        =================

@keyframes dash {
  25% {stroke-dashoffset: 0; opacity: inherit;}
  75% {opacity: 1;stroke-dashoffset: 0;}
  99% {opacity: 0;stroke-dashoffset: 0;}
  100%{stroke-dashoffset: @strokeDash;}
}

@keyframes pulsate {
    0%       {opacity:1}
    25%      {.pulsateInital(1);}
    28%      {.pulsateDownstate();}
    37.5%    {.pulsateInital(0.95);}
    40.5%    {.pulsateDownstate();}
    50%      {.pulsateInital(0.9);}
    53%      {.pulsateDownstate();}
    62.5%    {.pulsateInital(0.85);}
    65.5%    {.pulsateDownstate();}
    75%      {.pulsateInital(0.85);opacity:1;fill:none;}
    100%     {.pulsateDownstate();opacity:0;fill:white;}
}

@keyframes float {
    0%       {opacity: 0}
    0.1%     {transform: scale(@inital);opacity: 0.6;}
    40%      {transform: scale(2);opacity: 0;}
    100%     {transform: scale(@inital);opacity: 0;}
}

@keyframes float2 {
    0%       {opacity: 0}
    0.1%     {transform: scale(@inital);opacity: 0.6;}
    30%      {transform: scale(2);opacity: 0;}
    100%     {transform: scale(@inital);opacity: 0;}
}

@keyframes float3 {
    0%       {opacity: 0}
    0.1%     {transform: scale(@inital);opacity: 0.6;}
    30%      {transform: scale(2);opacity: 0;}
    100%     {transform: scale(@inital);opacity: 0;}
}

// Presentation         =================

.spinner{
  position: relative;
  z-index: 200;
  width: 300px;
  height: 200px;
  background: #305ae3;
  margin: 0 auto;
  margin-top: 80px;
  padding-top: 50px;
  padding-left: 100px;
  border-radius: 4px;
  box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.2);
  &:after{
    content: "";
    position: absolute;
    z-index: 300;
    width: 300px;
    height: 200px;
    top: 0;
    left: 0;
    opacity: 0.3;
    background: url('http://s14.postimg.org/6fo2wue0h/Bildschirmfoto_2014_09_01_um_11_10_10.png');
    background-size: 100%;
  }
}

SVG "Foursquare-Inspired" Loading Spinner.markdown

SVG "Foursquare-Inspired" Loading Spinner

(Note: Best viewed in Chrome + Firefox)

Loved that spinner and built it. As seen on http://blog.brianlovin.com/design-details-foursquare-for-ios/

Forked from Thies Brake's Pen SVG "Foursquare-Inspired" Loading Spinner.

A Pen by Jordan Halvorsen on CodePen.

License.