Sit 'n Spin

index.html

<div class="spinner"></div>

Sit-n-Spin.markdown

Sit 'n Spin

A pure CSS spinner mixin for LESS that utilizes an inlined SVG for its source.

A Pen by esjay on CodePen.

License.

style.less

/* Normal Usage */
// @import 'sitNSpin.less';
.spinner {
  .sitNSpin(750ms);
}

/* sitNSpin.less */
.sitNSpin(@animationSpeed: 1000ms) {
  @sitNSpinSize: 10em;
  
  &:before {
    .transformBefore(45);
    animation: @animationSpeed rotateBefore infinite linear reverse;
  }
  &:after {
    .transformAfter(45);
     animation: @animationSpeed rotateAfter infinite linear;
  }
  &:before, &:after {
    box-sizing: border-box;
    content: '';
    display: block;
    position: fixed;
  
    top: 50%;
    left: 50%;
    margin-top: (@sitNSpinSize * -.5);
    margin-left: (@sitNSpinSize * -.5);
    width: @sitNSpinSize;
    height: @sitNSpinSize;

    transform-style: preserve-3d;
    transform-origin: 50%;
    transform: rotateY(50%);
    perspective-origin: 50% 50%;
    perspective: 340px;

    background-size: @sitNSpinSize @sitNSpinSize;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
    
  }

  
}

.transformThis(@X: 0, @Y: 0, @Z: 0) {
  transform: rotateX(unit(@X, deg)) rotateY(unit(@Y, deg)) rotateZ(unit(@Z, deg));
}
.transformBefore(@Z) {
  .transformThis(60, 45, @Z);
}
.transformAfter(@Z) {
  .transformThis(240, 45, @Z);
}

@keyframes rotateBefore {
  from {
    .transformBefore(0);
  }
  to {
    .transformBefore(-360);
  }
}
@keyframes rotateAfter {
  from {
    .transformAfter(0);
  }
  to {
    .transformAfter(360);
  }
}