progress进度条两边到中间递减效果

最新推荐文章于 2022-05-26 14:19:15 发布

有舍亦有得

最新推荐文章于 2022-05-26 14:19:15 发布

阅读量635

点赞数

分类专栏：前端文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/cxlmap/article/details/121513290

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML5的Progress标签创建一个从两边向中间递减的进度条效果。通过组合两个progress元素，设置其中一个的dir属性为rtl使其反向显示，再配合JavaScript定时器进行值的递减，最终实现动态效果。这个方法适用于网页动态展示任务进度或加载状态的场景。

摘要由CSDN通过智能技术生成

实现效果：进度条从两边递减到中间，最后为0。

实现思路：

1、两个progress拼接

2、修改第一个progress的属性，dir="rtl"，将其反转，实现value为0时在右边。

参考HTML dir 属性

3、定时或者递归调用，实现自动递减，递减速度可调节

4、调整progress高度

<!DOCTYPE html>
<html lang="zh-cmn-hans">

<head>
    <meta charset="utf-8">
    <title>progress</title>

    <script type="text/javascript">
        var n = 120
        window.onload = function () {
            start_run(n);
        }
        function start_run(n) {
            var progress1 = document?.getElementById("pro1")
            var progress2 = document?.getElementById("pro2")
            n = n - 1
            n = n <= 0 ? 120 : n
            progress1.value = n
            progress2.value = n
            setTimeout("start_run(" + n + ")", 100)
        }
    </script>
</head>

<body>
    <progress dir="rtl" value="120" max="120" id="pro1" style="height: 3px;"></progress><progress value="120" max="120"
        id="pro2" style="height: 3px;"></progress>
</body>

</html>