Web前端 | 进度条 | 动态进度条 | IOS进度条 | 仿IOS进度条

Vin Cente

已于 2023-02-23 14:31:39 修改

阅读量701

点赞数

分类专栏： WEB 前端文章标签：前端 css html

于 2022-08-09 13:21:16 首次发布

本文链接：https://blog.csdn.net/Mr_Fei/article/details/126245478

版权

WEB 前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、Html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态进度条</title>
    <link href="./Content/Site.css" rel="stylesheet"/>
</head>
<body onload="Load()">
    <!-- loading - Start-->
    <div id="load">
        <div id="loading">
            <div id="loadingText" class="loadingText">0 %</div>
            <div class="loading">
                <div id="loadingBar" class="loadingBar"></div>
            </div>
        </div>
    </div>
    <!-- loading - End -->
    <div id="body">
        <h3>主页要显示的内容</h3>
    </div>
    <script src="./Scripts/Layout.js"></script>
    <script src="./Scripts/jquery-3.6.0.min.js"></script>
</body>
</html>

二、Css代码

/* Others */
* { margin:0px; padding:0px;}
body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; color: #555; background: #f1f1f1; line-height: 1.5; text-align:center; padding-top:0px; padding-bottom:0px;}
img { border:0px; display:block;}
ul, li { list-style:none;}
a { text-decoration:none; color:#ccc;}
   a:hover { text-decoration:none; color:#ccc;}
#body{ display: none;}
/*loading*/
body #load{ width:100%;height:100%;}
body #loading{ width:60%; margin:600px auto 0px; }
.loadingText{ display:block; font-size:26px; font-weight:600; margin:0px auto; color:black; box-sizing:content-box;}
.loading{ height:5px; background-color:#e5e9eb; border-radius:0; box-shadow:none;margin-bottom:30px; overflow:visible;}
.loadingBar{ height:5px; background-color:#000000; position:relative; background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);}
@-webkit-keyframes animate-positive{ 0%{ width:0%;}}
@keyframes animate-positive{ 0% { width:0%;}}
/* #body */
#body h3{ padding-top: 400px;}

三、jQuery代码

//动画加载事件
function Load() {
    //初始化进度
    var value = 0;
    //初始化进度元素宽度
    loadingBar.style.width = 0;
    //加载计时器
    var timer = setInterval(function () {
        //判断当前进度
        if (value >= 101) {
            setTimeout(function () {
                //隐藏动画
                $("#load").hide();
                //显示页面
                $("#body").show();
            }, 800);
            //清除计时器
            clearInterval(timer);
        } else {
            //修改进度元素宽度
            loadingBar.style.width = value + "%";
            //修改文本元素
            loadingText.innerText = value + " %";
        }
        value++;
    }, 40);
};