Whim, JavaScript mimics the download progress bar effect

Updates, this time using JavaScript to mimic the download progress bar effect. Principle: Two div nesting, inside the width of 0, outside their own arbitrarily defined, using the SetInterval () function to increase the width of the div inside the value, so that its background color slowly spread out, while adding a count of the value "index" to indicate progress. Using

The window.getComputedStyle () function gets the width.

Direct Show Code:

<!    DOCTYPE html>#fa {width:600px;            height:50px;            margin:100px Auto; Background-color: #ffffff; border:0.5px Solid #999999; Border-radius:1px; Box-sizing:content-box;            } #ch {width:0px;            height:50px; Background-Color:pink; Text-Align:right;            Color:green; Line-height:50px; Box-sizing:content-box; }    </style>window.onload=function () {        varta_length=600;//the width of the FA        varta_time=200;//time to go to the head        varta_min=20;//take one step at a speedAgo (ta_length,ta_time,ta_min);//calling Functions    functionAgo (ta_length,ta_time,ta_min) {varElem=document.getelementbyid ("ch");//Get ch           varFa=document.getelementbyid ("FA"); varSteplength=ta_length/ta_time;varCover=0; varIndex=0; Alert ("Start Download"); varstep=function() {index+=0.5; if(cover+steplength<=ta_length) {Elem.style.width=parsefloat (GetStyle (elem, ' width ')) +steplength+ ' px ';//The obtained width is added to each step staplengthelem.innerhtml=index+ "%";//Count Valuecover+=steplength;//the width of CH is increased                                              if(index==100) {Elem.style.backgroundColor= "green";//background color change after hundred percent                        }               }               Else{Fa.style.border= "0px";                   Clearinterval (Intervalid); Elem.style.border= "1px solid green"; Elem.innerhtml=" "; Alert ("Download Complete"); }           }        varIntervalid=setinterval (step,ta_min); }    functionGetStyle (elem,cssname) {if(window.getComputedStyle) {returnwindow.getComputedStyle (Elem) [Cssname]//get the width of ch}Else{            returnElem.currentstyle[cssname]; }    }    }</script></body>
You can: Click here to see the effect
Whim, JavaScript mimics the download progress bar effect