菜单 搜索
首页 前端知识 页面实现加载进度条

页面实现加载进度条

2024-07-27 22:07:24 前端知识 前端哥 546 891 我要收藏

文章目录

  • 一、定时器实现进度条
  • 二、css3实现进度条
  • 三、加载状态事件实现进度条

一、定时器实现进度条

原理：设置了固定的时间后将图片和遮罩层隐藏,显示出页面的内容

效果1：

定时器实现的进度条效果

代码实现

 <!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>lmx</title>
</head>

<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        background-color: #f6f6f6;
    }

    .loading {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        background: #fff;
    }

    .loading .pic {
        width: 64px;
        height: 64px;
        background: url(img/Running\ heart.gif);/** 在https://preloaders.net/选择自己喜欢的gif **/
        position: absolute;
        background-size: 100% 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

    .imgs {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    img {
        flex: 1;
        width: 20%;
        height: auto;
        vertical-align: middle;
    }
</style>

<body>
    <div class='loading' id='loading'>
        <div class='pic'></div>
    </div>
    <div class="imgs">
        <img src="https://img2.baidu.com/it/u=463842799,984448752&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"
            alt=""><img
            src="https://img1.baidu.com/it/u=851989706,374477030&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
            alt=""><img
            src="https://img0.baidu.com/it/u=819920547,2844342082&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
            alt=""><img
            src="https://img2.baidu.com/it/u=3448354744,1362206024&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500.webp"
            alt=""><img
            src="https://img2.baidu.com/it/u=3185636914,4082760025&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"
            alt=""><img
            src="https://img2.baidu.com/it/u=2878460091,2929846652&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"
            alt=""><img
            src="https://img0.baidu.com/it/u=4101594417,2919542589&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
            alt=""><img
            src="https://img2.baidu.com/it/u=2567022104,3971898384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
            alt=""><img
            src="https://img1.baidu.com/it/u=4131986913,2344038461&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
            alt=""><img
            src="https://img0.baidu.com/it/u=156148580,3161347012&fm=253&fmt=auto&app=138&f=PNG?w=501&h=500.webp"
            alt="">
    </div>
</body>
<script>
/** window.onload是一个事件，就是在文档加载完成之后触发的事件，可以为这个事件添加事件处理函数 **/
    window.onload = function () {
        setTimeout(function () {
            var oLoding = document.getElementById('loading');
            oLoding.style.display = 'none';
        }, 1000);
    }
</script>

</html>

效果2：
在这里插入图片描述
代码实现：

<!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>lmx</title>
</head>

<style>
    #box {
        width: 0;
        height: 45px;
        background-color: hotpink;
    }
</style>

<body>
    <div id="box"></div>
    <div id="num"></div>
    <script>
        let box = document.getElementById('box') 
        let num = document.getElementById('num')  //获取dom元素
        let cliWidth = document.documentElement.clientWidth  //获取可视区域的宽度
        let boxWidth = 0 //box盒子宽度默认设置为0

        function jinDu() {
            boxWidth += 25  // 每100毫秒累加25
            if (boxWidth >= cliWidth) { // 判断当盒子的宽度大于页面可视区域的宽度时
                boxWidth = cliWidth // 为了避免宽度超出让盒子宽度等于可视区域的宽度
                clearInterval(timer) // 清除定时器
            }
            box.style.width = boxWidth + 'px'  // 宽度赋值
            num.innerText = (boxWidth / cliWidth * 100).toFixed(2) + '%' // 所占百分比赋值
        }
        let timer = setInterval(jinDu, 100)  //定时器 每100毫秒执行一次
    </script>
</body>

</html>

二、css3实现进度条

效果：
在这里插入图片描述

代码实现：

<!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>lmx</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #loading {
        width: 100%;
        height: 100%;
        position: fixed;
    }

    #loading .pic {
        width: 90px;
        height: 50px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 100;
    }

    #loading .pic i {
        display: block;
        width: 9px;
        height: 50px;
        float: left;
        margin: 0 2px;
        background: #00CC99;
        -webkit-transform: scaleY(0.4);
        -ms-transform: scaleY(0.4);
        transform: scaleY(0.4);
        -webkit-animation: load 1.2s infinite;
        animation: load 1.2s infinite;
    }

    @-webkit-keyframes load {

        0%,
        40%,
        100% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }

        20% {
            -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
        }
    }

    #loading .pic i:nth-child(2) {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    #loading .pic i:nth-child(3) {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    #loading .pic i:nth-child(4) {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    #loading .pic i:nth-child(5) {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    #loading .pic i:nth-child(6) {
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }
</style>

<body>
    <div id="loading">
        <div class="pic">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</body>

</html>

三、加载状态事件实现进度条

1）document.onreadystatechange 页面加载状态改变时的事件
2）document.readyState 返回当前文档的状态

<!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>lmx</title>
</head>


<style>
    .loading {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        background: #FFF;
    }

    .loading .pic {
        width: 64px;
        height: 64px;
        background: url(img/Running\ heart.gif);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    #imgs{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    img{
        width: 20%;
        height: auto;
    }
</style>
<script src="./jQuery文件//jquery-1.12.1.min.js"></script>
<script>
    document.onreadystatechange = function () { //加载状态改变的事件
        if (document.readyState == "complete") { //当前文档加载完成
            $(".loading").fadeOut(); // fadeOut淡出，隐藏被选元素
        }
    }
</script>
</head>

<body>
    <div class="loading">
        <div class="pic">
        </div>
    </div>
    <div id="imgs">
        <img src="https://img2.baidu.com/it/u=463842799,984448752&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"
        alt=""><img
        src="https://img1.baidu.com/it/u=851989706,374477030&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
        alt=""><img
        src="https://img0.baidu.com/it/u=819920547,2844342082&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"
        alt=""><img
        src="https://img2.baidu.com/it/u=3448354744,1362206024&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500.webp"
        alt=""><img
        src="https://img2.baidu.com/it/u=3185636914,4082760025&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp">
    </div>
</body>
</html>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/14352.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

Swift使用JSONDecoder处理json数据，实现json序列化和反序列化

2024-08-10 00:08:34

【Linux】升级FastJSON版本-jar

2024-08-10 00:08:31

用友NC Cloud blobRefClassSearch FastJson反序列化RCE漏洞复现

2024-08-10 00:08:29

python中的pickle模块和json模块

2024-08-10 00:08:29

Golang 操作 JSON 时容易踩的 7 个坑

2024-08-10 00:08:29

自定义Mybatis的TypeHandler，轻松应对Mysql的JSON类型

2024-08-10 00:08:19

JMeter-JSON提取器（JSON Extractor）

2024-08-10 00:08:09

构建报错：To install them, you can run: npm install --save viewerjs viewerjs/dist/viewer.css

2024-08-10 00:08:09

大家推荐的文章
1

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
2

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
3

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
4

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
5

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
6

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
7

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
8

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
9

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
10

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！