JSFiddle - React, Tailwind, and code Playground

by Radiocity

HTML

<div class="jl_form">
    <div class="jl_progress">
        <div class="jl_bar"></div>
    </div>
    <div class="jl_buttons">
        <div class="jl_pause jl_button">Pause</div>
        <div class="jl_cancel jl_button">Cancel</div>
    </div>
</div>

CSS

body{
 padding:2em;    
}

.jl_form{
 background: #f0f0f0;
 border-radius:2px;
 padding:1em;
 font-size:12px;
 width:400px;
 border-bottom: 1px solid #e0e0e0;
 border-right: 1px solid #e0e0e0;
}

.jl_progress{
 overflow:hidden;
 border-radius:4px;
 margin: 0 auto;
 border-bottom: 1px solid #fff;
 border-right: 1px solid #fff;
 border-top: 1px solid #e0e0e0;
 border-left: 1px solid #e0e0e0;
 min-height:8px;
 height:8px;
 line-height:8px;
 width: 390px;
 position:relative;
}

.jl_bar{
     background: #9c6;
     min-height:8px;
     height:8px;
     line-height:8px;
     width: 390px;
     position:relative;
     left:-100%;   
}

.jl_buttons{
 text-align:center; 
 margin-top:1em;    
}

.jl_button{
 display:inline-block;
 margin: 0 1em;
 line-height: 3em;    
 max-width: 100px;
 width:100px;
 cursor:pointer;
 border-radius:2px;
}

.jl_button:hover{
 background: #e0e0e0;   
}

JavaScript

$('body').append('<iframe id="jl_file" name="jl_file" style="height:1px; max-height:1px; width:1px; display: none"></iframe>');

for (var i = 1; i < 101; i++){
 $('.jl_bar').animate({"left": "+=1%"}); 
}