JSFiddle - React, Tailwind, and code Playground

by Iskren Stanislavov

HTML

<span id="pmp" class="pump"></span>

CSS

.pump:before {
    content:"";
    width:100px;
    border: 1px solid #0ca3da;
    top:-4px;
    left:-1px;
    height:100px;
    display:inline-block;
    position:relative;
}
.pump {
    height:10px;
    width:50%;
    top:4px;
    background:#0ca3da;
    display:inline-block;
    position:relative;
    animation: pump 1s;
    -webkit-animation: pump 1s;
} 
@keyframes pump {0%   {width: 0px;}}
@-webkit-keyframes pump {0%   {width: 0px;}}

.wrap {
 display: inline-block;
 width : 95px;
}

#pmp {width:34px;}