JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<button id="run">Load</button> <div id="res"></div>

Loading: <progress value="0" max="100"></progress>

CSS

body{
    padding:10px;
}
progress{
    width:400px;
}
#run{
    display:block;
    margin-bottom:20px;
}
#res{
    display:block;
    margin-bottom:20px;
    height:50px;
    width:30px;
}

JavaScript

function increment($progress){
    if($progress.val()<=100){
        $progress.val($progress.val()+1);
    } else {
       window.clearInterval(load);
    }
    return ($progress.val());
}

$('#run').click(function(){
    $progress = $('progress');
    var load = setInterval(function(){
        var complete = increment($progress);
        $('#res').text(complete+'%');
        if(complete>=100){
            clearInterval(load);
            $('body').append('<span>Complete</span>');
        }
    }, 50);
});