Flat Preloader (keyframes demo)

flat-preloader-keyframes-demo.markdown

Flat Preloader (keyframes demo)

Tried to improve Jack Rimell's demo code at http://jackrimell.co.uk/how-to-create-flat-preloaders-in-css-using-keyframes-part-one/.

*Note to self, do this with 1 element using box-shadows.

A Pen by Codrin Pavel on CodePen.

License.

index.html

<div class="load">
  <hr/><hr/><hr/><hr/>
</div>

script.js

/*
Variation on Jack Rimell's demo.
https://jackrimell.co.uk/how-to-create-flat-preloaders-in-css-using-keyframes-part-one/

Wanted to:
- write less code,
- animate with transforms rather than absolute positioning,
- be able to scale it easily.
*/

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body{background:#ECF0F1}

.load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  /*change these sizes to fit into your project*/
  width:100px;
  height:100px;
}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.load :first-child{background:#19A68C;animation-delay:-1.5s}
.load :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load :last-child{background:#193B48}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}