JSFiddle - React, Tailwind, and code Playground

by alexchetv

HTML

<div class="progress negative" v-if="offline">
  <div class="progress-track" style="width: 100%;">&nbsp;</div>
  <div class="progress-model" style="width: 0%;">&nbsp;</div>
</div>

CSS

.progress.negative {
    margin-top: -2px;
}

.progress {
    position: relative;
    height: 2px;
    display: block;
    width: 100%;
    background-clip: padding-box;
    overflow: hidden;
}

.progress-track,
.progress-buffer {
    transition: width 0.3s linear;
    position: absolute;
    bottom: 0;
}

.progress-track {
    left: 0;
    top: 0;
}

.progress.negative .progress-model {
    background-color: #db2828;
}


.progress.negative .progress-model:before {
    animation: progress-negative 6s cubic-bezier(.31, .54, .73, .44) infinite;
}

.progress.negative .progress-model:after {
    animation: progress-negative-short 6.1s cubic-bezier(.31, .54, .73, .44) infinite;
    animation-delay: 2.5s;
}

.progress.negative .progress-model:before, .progress.negative .progress-model:after {
    content: '';
    position: absolute;
    background: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
}
@keyframes progress-negative {
    0% {
        left: -60%;
        right: 120%; }
    10% {
        left: 60%;
        right: 0%; }
    20% {left: -60%;
        right: 120%; }
    80% {left: -60%;
        right: 95%; }   
    100% {left: -60%;
        right: 120%; }

}
@keyframes progress-negative-short {
    0% {
        left: -60%;
        right: 140%; }
    10% {
        left: 80%;
        right: 0%; }
   20% {left: -60%;
        right: 140%; }
    100% {left: -60%;
        right: 140%; }

}