JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<div class='bungkus'>
    <div id='loadinge'></div>
</div>

CSS

.bungkus {
    text-align: center;
    width: 320px;
    border: 1px solid #999;
    padding: 1px;
    height: 8px;
    margin-right: auto;
    margin-left: auto;
}
#loadinge {
    width: 0px;
    height: 100%;
    background-color: #6188F5;
    background-repeat: repeat-x;
    background-position: 0px 0px;
    background-size: 16px 8px;
    background-image: linear-gradient(315deg, transparent, transparent 33%, rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%, transparent 66%, transparent);
}

JavaScript

function jalankan() {
    var x = 0;

    var interpal = function () {

        var l = document.getElementById('loadinge');
        x++;
        l.style.width = x + '%';
        if (x === 100) {
            clearInterval(animasi);
            jalankan();

        }
    };
    var animasi = setInterval(interpal, 100);
}

jalankan()