Loader

by Andrey Izman

HTML

<div style="width: 240px">
  <div class="cssload-loader">
    <div class="cssload-inner cssload-one"></div>
    <div class="cssload-inner cssload-two"></div>
    <div class="cssload-inner cssload-three"></div>
  </div>
</div>

CSS

.cssload-loader {
            position: relative;
            left: calc(50% - 36px);
            width: 72px;
            height: 72px;
            border-radius: 50%;
            -o-border-radius: 50%;
            -ms-border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            perspective: 900px;
            }

        .cssload-inner {
            position: absolute;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-radius: 50%;
            -o-border-radius: 50%;
            -ms-border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            }

        .cssload-inner.cssload-one {
            left: 0%;
            top: 0%;
            animation: cssload-rotate-one 1.6s linear infinite;
            -o-animation: cssload-rotate-one 1.6s linear infinite;
            -ms-animation: cssload-rotate-one 1.6s linear infinite;
            -webkit-animation: cssload-rotate-one 1.6s linear infinite;
            -moz-animation: cssload-rotate-one 1.6s linear infinite;
            border-bottom: 3px solid rgb(34,99,156);
            }

        .cssload-inner.cssload-two {
            right: 0%;
            top: 0%;
            animation: cssload-rotate-two 1.6s linear infinite;
            -o-animation: cssload-rotate-two 1.6s linear infinite;
            -ms-animation: cssload-rotate-two 1.6s linear infinite;
            -webkit-animation: cssload-rotate-two 1.6s linear infinite;
            -moz-animation: cssload-rotate-two 1.6s linear infinite;
            border-right: 3px solid rgb(34,99,156);
            }

        .cssload-inner.cssload-three {
            right: 0%;
            bottom: 0%;
            animation: cssload-rotate-three 1.6s linear infinite;
  ...