css+jquery 进度条

最新推荐文章于 2023-06-05 15:55:04 发布

anran_1211

最新推荐文章于 2023-06-05 15:55:04 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/anran_1211/article/details/79052208

版权

本文介绍了一种使用纯CSS和少量JavaScript实现的动态加载进度条效果。通过HTML结构定义加载条的基本样式，并利用CSS渐变背景及过渡效果完成进度显示。JavaScript负责更新加载条宽度以反映实际加载状态。

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>CSS Graph</title>
    <style>
        .loading-status {
            width: 320px;
            border: 1px #42A9FF solid;
            -webkit-box-shadow: 0px 2px 2px #D0D4D6;
            height: 19px;
            -webkit-border-radius: 10px!important;
            -moz-border-radius: 10px!important;
            border-radius: 10px!important;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#E1E9EE), to(white));
            padding: 1px;
            float: left;
            margin-left:15px;
            margin-top:17px;
        }
        .load-completion {
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,#42A9FF), to(#7BC3FF));
            width: 0%;
            height: 100%;
            -webkit-border-radius: 10px!important;
            -moz-border-radius: 10px!important;
            border-radius: 10px!important;
            -webkit-transition: width 1s ease-in-out;
            line-height:17px;
            padding-right: 10px;
            text-align: right;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="loading-status">
        <div class="load-completion"></div>
    </div>
    <script src="jquery-3.1.1.js"></script>
    <script>
        LoadFn(70);
        function LoadFn(loadValue) {
            $('.load-completion').width(loadValue+"%");
            $('.load-completion').html(loadValue+'%');
        }
    </script>
</body>
</html>