css样式实现一个进度条

最新推荐文章于 2024-06-05 18:34:39 发布

水痕01

最新推荐文章于 2024-06-05 18:34:39 发布

阅读量8.4k

点赞数 1

本文链接：https://blog.csdn.net/kuangshp128/article/details/69218384

版权

css 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

html

16 篇文章 0 订阅

订阅专栏

css3

11 篇文章 0 订阅

订阅专栏

效果如图

这里写图片描述

代码

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="Generator" content="EditPlus®">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #progressbar {
                position: absolute;
                top: 100px;
                left: 100px;
                height: 10px;
                width: 500px;
                border: 1px solid #63B8FF;
                border-radius: 5px;
                text-align: center;
                line-height: 10px;
                font-size: 0.8em;
            }

            #progress {
                position: absolute;
                /*  border:1px solid;*/
                height: 100%;
                width: 0;
                background: #BFEFFF;
                border-radius: 5px;
                z-index: -1;
            }

            #progress {
                background-size: 30px 30px;
                background-image: -webkit-linear-gradient(-45deg, #63B8FF, #63B8FF 25%, #BFEFFF 25%, #BFEFFF 50%, #63B8FF 50%, #63B8FF 75%, #BFEFFF 75%, #BFEFFF);
                background-image: -moz-linear-gradient(-45deg, #63B8FF, #63B8FF 25%, #BFEFFF 25%, #BFEFFF 50%, #63B8FF 50%, #63B8FF 75%, #BFEFFF 75%, #BFEFFF);
                background-image: linear-gradient(-45deg, #63B8FF, #63B8FF 25%, #BFEFFF 25%, #BFEFFF 50%, #63B8FF 50%, #63B8FF 75%, #BFEFFF 75%, #BFEFFF);
                -webkit-animation: animate 1.5s linear infinite;
                -moz-animation: animate 1.5s linear infinite;
                animation: animate 1.5s linear infinite;
            }

            @-webkit-keyframes animate {
                from {
                    background-position: 0 0;
                }
                to {
                    background-position: 60px 30px;
                }
            }

            @-moz-keyframes animate {
                from {
                    background-position: 0 0;
                }
                to {
                    background-position: 60px 30px;
                }
            }

            @keyframes animate {
                from {
                    background-position: 0 0;
                }
                to {
                    background-position: 60px 30px;
                }
            }
        </style>
    </head>

    <body>
        <div id="progressbar">
            <div id='progress'></div>
            <p></p>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                var now = 0;
                var timer = setInterval(function() {
                    if(now == 100) {
                        clearInterval(timer);
                        window.location.href = '#';
                    } else {
                        now += 1;
                        progressfn(now);
                    }
                }, 50);
            }

            function progressfn(cent) {
                var progressbar = document.getElementById("progressbar");
                progressbar = progressbar.getElementsByTagName("p");
                progressbar[0].innerHTML = cent + "%";
                var progress = document.getElementById("progress");
                progress.style.width = cent + "%";
            }
        </script>
    </body>

</html>

水痕01

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
css样式实现一个进度条

效果如图代码<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords"
复制链接

扫一扫