Pure JavaScript Progress Bar

Add-ons

2026-07-25 23:55 3 次浏览 • 0 次下载 2.7KB

Plugin Description: A progress bar plugin built entirely with native JavaScript. It provides various convenient callback functions for monitoring progress at any time.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="progress.js"></script>
    <style>
        body{
            background: url("bg.png");
        }
 
        .pro,.result {
            width: 200px;
            margin: 100px auto;
 
        }
        .result{
            text-align: center;
            text-shadow: 0 0 5px #333333;
            color:#FFFFFF;
        }
    </style>
    <script>
 
        window.onload = function(){
 
            var result = document.getElementsByClassName('result')[0];
 
            var pro = new progress({
                width : 200,//Progress bar width
                height: 30,//Progress bar height
                bgColor : "#3E4E5E",//Background color
                proColor : "#009988",//Foreground color
                fontColor : "#FFFFFF",//Text color
                val : 10,//Default value
                text:"Current progress: #*val*#%",//Displayed text
                showPresent : true,
                completeCallback:function(val){
                    console.log('Completed');
                    result.innerHTML = 'Completed';
                },
                changeCallback:function(val){
                    console.log('Current progress: '+val+'%');
                    result.innerHTML = 'Current progress: '+val+'%';
                }
            });
 
            document.getElementsByClassName('pro')[0].appendChild(pro.getBody());
 
 
            setTimeout(function(){
 
                pro.update(50);//Update progress
                setTimeout(function(){
 
                    pro.update(10);
                    setTimeout(function(){
 
                        pro.update(100);
                        setTimeout(function(){
 
                            pro.update(0);
                        },3000);
                    },3000);
 
                },3000);
            },3000);
        };
 
    </script>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

var pro = new progress({
    width: 200,//Progress bar width
    height: 40,// Progress bar height
    bgColor: "#3E4E5E",//Background color
    proColor: "#009988",//Foreground color
    fontColor: "#FFFFFF",//Text color
    val: 10,//Default value
    text: "Current progress: #*val*#%",//Displayed text, where #*val*# is a placeholder that will be replaced with the current progress (e.g., 100 or 50) after successful initialization
    showPresent: true,//Whether to display text. If true, the text content will be displayed inside the progress bar; otherwise, it will be hidden
    completeCallback: function (val) {//Execute this callback function when the progress reaches 100%
        console.log('Completed');
    },
    changeCallback: function (val) {//Execute this function whenever the progress changes
        console.log('Current progress is ' + val + '%');
    }
});

When using this progress bar plugin, first instantiate a progress bar object and pass in some configuration parameters. The specific parameters are described in the code and comments above.

After the progress bar has been successfully initialized, you can use the getBody() method to retrieve the progress bar element, as shown below:

1	`document.getElementsByClassName('pro')[0].appendChild(pro.getBody());`

That's it! You have successfully created a progress bar!