Home  >  Article  >  Web Front-end  >  js progress bar control implementation

js progress bar control implementation

高洛峰
高洛峰Original
2016-12-16 16:41:131314browse

First define a div with a span embedded in it:

<div id="loadbar">  
              <span id="bar"  style="width: 10%;">10%</span>  
        </div>

Then use css to complete the style of the progress bar:

div#loadbar{  
            width:300px;  
            background-color: silver;  
            border:1px solid salmon;  
            text-align: center;  
            border-radius:8px ;  
        }  
        #bar{  
            display: block;  
            font-family: arial;  
            font-size: 12px;  
            background-color: sandybrown;  
            text-align: center;  
            padding: 5px;  
            border-radius:5px ;  
               
        }

Finally, use js to control the progress bar display:

var i=0;   
    function startbar(){  
        var showbar=setInterval("setbar()",1000);  
    }  
    function setbar(){  
        console.log("setbar");  
        i+=5;  
        if(i>=100)  
        {   
            clearInterval(showbar);  
        }  
        document.getElementById("bar").style.width=i+"%";  
        document.getElementById("bar").innerHTML=i+"%";  
    }  
      
    startbar();

The effect is as follows: js progress bar control implementation


More js progress bars For articles related to control implementation, please pay attention to the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn