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

页面实现加载进度条

2024-07-27 22:07:24 前端知识 前端哥 556 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基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

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

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

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

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

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

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

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

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

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