<div class="example is-processing">
</div>
$loader-height: 0.25em;
$loader-color: #00BCD4;
$loader-track-color: #ccc;

.example {
    width: 10em;
    height: 5em;
    margin: 1em;
    border: 1px solid black;
}

.is-processing {
    position: relative;
    
    &::before, &::after {
        content: '';
        display: block;
        height: $loader-height;
        position: absolute;
    }
    
    &::before {
        background-color: $loader-track-color;
        width: 100%;
    }
    
    &::after {
        background-color: $loader-color;
        animation: loading-bar 1s infinite linear;
    }
}

@keyframes loading-bar { 
    0% {
        width: 0;
        left: 0%;
    }
    23% {
        width: 30%;
        left: 0%;
    }
    61.9% {
        width: 30%;
        left: 70%;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.