JSFiddle - React, Tailwind, and code Playground

by Yashwanth M

HTML

<div id="progress-0">Loading</div>
<input id="progress-1" value="Loading"></input>
<button id="progress-2">Loading</button>
<p id="progress-3">Loading</p>

CSS

#progress-0 {
    border:1px solid black;
    width:500px;
    background:#999;
    text-align:center;
}

#progress-1 {
    border:1px solid black;
    width:500px;
    background:#999;
    text-align:center;
    margin-top:10px;
    border-radius: 10px;
}

#progress-2 {
    border:1px solid black;
    width:500px;
    background:#999;
    text-align:center;
    margin-top:10px;
}

#progress-3 {
    border:1px solid black;
    width:100px;
    height:100px;
    background:#999;
    line-height: 100px;
    text-align:center;
    margin-top:10px;
    border-radius: 200px;
}

JavaScript

function show_progress(i) {
    var progress1 = i;
    var progress2 = progress1+1;
    var progress3 = progress1+2;

    var magic = "linear-gradient(to right, #FFC2CE " + progress1  + "% ,red " + progress2  + "% , #FFFFFF " + progress3  + "%)";
    document.getElementById("progress-0").style.background = magic; 
    
    var magic = "linear-gradient(to right, lightblue " + progress1  + "% , lightgreen " + progress2  + "%)";
    document.getElementById("progress-1").style.background = magic; 
    
    var magic = "linear-gradient(to right, lightblue " + progress1  + "% , #FFFFFF 100%)";
    document.getElementById("progress-2").style.background = magic; 

    var magic = "linear-gradient(#FFC2CE " + progress1  + "% ,red " + progress2  + "% , #FFFFFF " + progress3  + "%)";
    document.getElementById("progress-3").style.background = magic;     
 }


function timeout(){
     t = setTimeout(function(){
        show_progress(t)
        timeout();
    },50);
    if (t == 78) { clearTimeout(t); }
    console.log(t);
}

timeout();