.demo{ background: #1B9CFC; }

.loader{
    width: 16em;
    height: 8em;
    margin: 50px auto 0;
    position: relative;
    overflow: hidden;
}

.loader:before,
.loader:after{
    content: '';
    position: absolute;
    bottom: 0;
}

.loader:before{
    background-color: hsla(0, 0%, 85%);
    width: inherit;
    height: 0.2em;
}

.loader:after{
    width: 50%;
    height: inherit;
    border: 0.2em solid hsla(0, 0%, 85%);
    border-radius: 50%;
    left: 25%;
}

.loader span{
    background-color: #fff;
    width: 5%;
    height: 10%;
    border-radius: 50%;
    transform-origin: 50% -3em;
    position: absolute;
    left: -5%;
    bottom: 0.2em;
    animation: 2s linear infinite;
    animation-name: run, rotating;
}

.loader span:nth-child(2){ animation-delay: 0.075s; }
.loader span:nth-child(3){ animation-delay: 0.15s; }

@keyframes run{
    0%{ left: -5%; }
    10%, 60%{ left: calc((100% - 5%) / 2); }
    70%, 100%{ left: 100%; }
}

@keyframes rotating{
    0%, 10%{ transform: rotate(0deg); }
    60%, 100%{ transform: rotate(-1turn); }
}