Native JS implementation of loading progress bar

This article shares a dynamic loading progress bar special effect implemented by native JS. The effect is as follows:

The implemented code is as follows:

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Native JS implementation of loading progress bar</title>
    <style>
        #progressBox {
            width: 300px;
            height: 40px;
            border: 1px solid #C8C8C8;
            background: white;
            position: relative;
            margin: 0 auto;
            margin-top: 100px;
        }
 
        #progressBar {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            height: 40px;
            width: 100%;
            line-height: 40px;
            color: white;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            font-family: Georgia;
            clip: rect(0px, 0, 40px, 0px);
            background: #00A1F5;
        }
 
        #progressText {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 100%;
            height: 40px;
            line-height: 40px;
            color: black;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            font-family: Georgia;
        }
    </style>
    <script>
        window.onload = function () {
            // Set the current starting state value,
            // In real situations, use HTML5's onprogress and onload to complete this // You can also cooperate with the background to return data in real time through ajax var iNow = 0;
            // Set the timer var timer = setInterval(function () {
                // If the current value is 100
                if (iNow == 100) {
                    // Clear the timer clearInterval(timer);
                }else {
                    // Add 1 to the current state value
                    iNow += 1;
                    // Call the execution status function and pass in the status value progressFn(iNow);
                }
 
            }, 30);
 
 
            function progressFn(cent) {
                // Get the outermost div
                var oDiv1 = document.getElementById('progressBox');
                // Get the div of the inner progress bar
                var oDiv2 = document.getElementById('progressBar');
                // Get the div when the inner text changes
                var oDiv3 = document.getElementById('progressText');
 
                // Get the total progress bar width var allWidth = parseInt(getStyle(oDiv1, 'width'));
 
                // Set the text content of the two inner divs to be the same oDiv2.innerHTML = cent + '%';
                oDiv3.innerHTML = cent + '%';
 
                // Modify the width of clip oDiv2.style.clip = 'rect(0px, ' + cent / 100 * allWidth + 'px, 40px, 0px)';
 
                // Get the attribute value of the current element function getStyle(obj, attr) {
                    // IE compatible
                    if (obj.currentStyle) {
                        return obj.currentStyle[attr];
                    }else {
                        // The second parameter is false, which is a common way of writing. It is for compatibility with old versions. return getComputedStyle(obj, false)[attr];
                    }
                }
            }
        };
    </script>
</head>
 
<body>
    <div id="progressBox">
        <div id="progressBar">0%</div>
        <!-- Set the second layer to change the color of the text when the progress exceeds the text-->
        <div id="progressText">0%</div>
    </div>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS realizes dynamic loading effects of progress bar
js+HTML5 canvas to implement a simple loading bar (progress bar) function example
Detailed explanation of the method of using JS+WCF to implement real-time monitoring of data loading with progress bar
Simple implementation of js progress bar loading effect
A brief analysis of JS asynchronous loading progress bar
js ajax loading progress bar code
pace.js page loading progress bar plugin
JavaScript to achieve web page loading progress bar code is super simple
jQuery plugin NProgress.js makes web page loading progress bar
JavaScript to implement page loading progress bar code

<<: Use Docker to build a Git image using the clone repository

>>: The difference between MySQL user management and PostgreSQL user management