How to implement css progress bar text that changes according to progress-CSS Tutorial-php.cn

How to implement css progress bar text that changes according to progress

小云云

Release： 2018-01-11 10:13:35

Original

2552 people have browsed it

This article mainly introduces the sample code for the text of the css progress bar to change according to the progress. It also introduces the text in the progress bar that needs to change according to the length of the progress. The editor thinks it is quite good. Now I will share it with you and make it for everyone. a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Requirements

1. The text in the progress bar needs to change according to the length of the progress

Principle

Use two p’s of the same style to overlap them

Effect

The font starts out blue and turns to white following the progress bar

Code

<!DOCTYPE html>
<html lang="cmn-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script>!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("p");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);</script>
    <title>进度条渐变</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        .box{
            position: fixed;
            left: 50%;
            transform: translate(-50%);
            width: 320px;
            height: 44px;
            background-color: white;
            color: #00a0e9;
            border: 1px solid #00a0e9;
        }
        .process{
            position: absolute;
            height: 100%;
            width: 0;
            background: #00a0e9;
            color: white;
            overflow: hidden;
            z-index: 10;
        }
        .process-text{
            position: absolute;
            left: 160px;
            top: 50%;
            font-size: 12px;
            transform: translate(-50%, -50%);
            white-space: nowrap;
        }
    </style>

    <script>
        function process() {
            var t = 1;
            var max = 320;
            var progress = document.getElementById("process");
            var process_texts = document.getElementsByClassName("process-text");
            var interval = setInterval(function () {
                if (t == max) {
                    clearInterval(interval);
                    for (var i in process_texts){
                        process_texts[i].innerHTML = &#39;完成&#39;
                    }
                } else {
                    progress.style.width = t + "px";
                    for (var i in process_texts){
                        process_texts[i].innerHTML = &#39;进度&#39; + (t / max * 100).toFixed(2) + "%"
                    }
                    t++;
                }
            }, 10)
        }
    </script>

</head>
<body>

<p class="box" onclick="process()">
    <p class="process" id="process">
        <span class="process-text">点击开始</span>
    </p>
    <span class="process-text">点击开始</span>
</p>

</body>
</html>

Copy after login

Related recommendations:

About the simplicity of PHP progress bar function Example

Jquery web page loading progress bar implementation method

How to use video and audio tags and progress bars in H5

The above is the detailed content of How to implement css progress bar text that changes according to progress. For more information, please follow other related articles on the PHP Chinese website!