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

原创

已于 2023-02-23 14:31:39 修改 · 802 阅读

收录于

当前文章被以下社区和专栏收录：

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

本文介绍了一个使用HTML、CSS和jQuery实现的动态加载效果。通过设置HTML结构和样式，结合jQuery控制进度条的显示与隐藏，实现了页面加载时的动态进度提示效果。

一、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.

标签