Material Design Spinner

Taken from the source code of Streamus

HTML

<div class="wrapper"><div class="spinner-container">
    <div class="spinner-layer spinner-layer--blue">
        <div class="spinner-clipper spinner-clipper--left">
            <div class="spinner-circle"></div>
        </div>        
        <div class="spinner--patch">
          <div class="spinner-circle"></div>
        </div>
        <div class="spinner-clipper spinner-clipper--right">
            <div class="spinner-circle"></div>
        </div>
    </div>
  </div>
</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    font-size: 0;
}

.spinner-container {
    width: 100%;
    height: 100%;
    -webkit-animation: container-rotate 1568ms linear infinite;
}

@-webkit-keyframes container-rotate {
    to {
        transform: rotate(360deg);
    }
}

.spinner-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.spinner-layer--blue {
    border-color: #4285f4;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1) infinite both;
}

@-webkit-keyframes fill-unfill-rotate {
    12.5% {
        transform: rotate(135deg);
    }

    25% {
        transform: rotate(270deg);
    }

    37.5% {
        transform: rotate(405deg);
    }

    50% {
        transform: rotate(540deg);
    }

    62.5% {
        transform: rotate(675deg);
    }

    75% {
        transform: rotate(810deg);
    }

    87.5% {
        transform: rotate(945deg);
    }

    to {
        transform: rotate(1080deg);
    }
}

@-webkit-keyframes blue-fade-in-out {
    from {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    26% {
        opacity: 0;
    }

    89% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes red-fade-in-out {
    from {
        opacity: 0;
    }

    15% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    51% {
        opacity: 0;
    }
}

@-webkit-keyframes yellow-fade-in-out {
    from {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    76% {
        opacity: 0;
    }
}

@-webkit-keyframes green-fade-in-out {
    from {
        opacity: 0;
    }

    65% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

 ...