进度条系列

其他 2018-11-29 23:19:03 阅读次数: 0

1、通过加载时间加载进度条

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>通过加载时间加载进度条</title>
    <style>
        *{  margin: 0;padding: 0;}
        .loading{ width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 100; }
        .pic{ width: 48px;height: 48px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto; }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        document.onreadystatechange=function(){
            console.log(document.readyState)
            if(document.readyState=='complete'){
                $('.loading').fadeOut()
            }
        }
    </script>
</head>
<body>
<div>
    <div class="loading">
        <img class="pic" src="35.gif" />
    </div>
    <img src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=3&spn=0&di=67346977170&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3534289497%2C3677101726&os=4256696858%2C44776407&simid=4095342090%2C610126790&adpicid=0&lpn=0&ln=1707&fr=&fmq=1541059903842_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fpic19.nipic.com%2F20120210%2F7827303_221233267358_2.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bgtrtv_z%26e3Bv54AzdH3Ffi5oAzdH3Fcmla0am_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0&islist=&querylist=" alt=""/>
    <img src="http://en.wuxi.gov.cn/upload/201810/7ac1n57fuj9s.png" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071043003&di=bd50d6b46a0e722c5171709ec4e1e428&imgtype=0&src=http%3A%2F%2Fimg.bqatj.com%2Fimg%2F5d7ce594f8a17de5.jpg" alt=""/>
    <img src="http://n.sinaimg.cn/games/transform/25/w550h275/20181101/Xb0F-hnfikve1647368.png" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541666075&di=649c870b2ee7397705901f3b982fa8f8&imgtype=jpg&er=1&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8ad4b31c8701a18bef2f8665952f07082938fed0.jpg" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071440447&di=4ae1d8af2c3a1021e3e735534683a92f&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F019c2958a2b760a801219c77a9d27f.jpg" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071468776&di=23264b398f2daa74b94348f42767f1a6&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F339%2F26093.jpg" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071481739&di=2f8b1a4cacadf1928853f83621b8e4e5&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F012a1b59119217a801216a3e14fb6c.jpg" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071494796&di=6cbf38c10e1ac03a20a5e8cb1d09d132&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0144045568e29f0000012716820602.jpg%401280w_1l_2o_100sh.jpg" alt=""/>
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3333131219,1856818389&fm=26&gp=0.jpg" alt=""/>
    <img src="http://img0.imgtn.bdimg.com/it/u=1532647500,2553956028&fm=26&gp=0.jpg" alt=""/>
</div>

</body>
</html>

2、css3进度条

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css3进度条</title>
    <style>
        *{ margin: 0;padding: 0;}
        .loading{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 100;}
        .pic{width: 50px;height: 50px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
        .pic i{display:block;width: 6px;height: 50px;background: #399;margin: 0 2px;float: left;-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}
        .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s}
        .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s}
        .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s}
        .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s}
        @-webkit-keyframes load {
            0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
            20%{-webkit-transform: scaleY(1);transform: scaleY(1)}
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        document.onreadystatechange=function(){
            console.log(document.readyState)
            if(document.readyState=='complete'){
                $('.loading').fadeOut()
            }
        }
    </script>
</head>
<body>
<div class="loading">
    <div class="pic">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</div>
<img src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=3&spn=0&di=67346977170&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3534289497%2C3677101726&os=4256696858%2C44776407&simid=4095342090%2C610126790&adpicid=0&lpn=0&ln=1707&fr=&fmq=1541059903842_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fpic19.nipic.com%2F20120210%2F7827303_221233267358_2.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bgtrtv_z%26e3Bv54AzdH3Ffi5oAzdH3Fcmla0am_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0&islist=&querylist=" alt=""/>
<img src="http://en.wuxi.gov.cn/upload/201810/7ac1n57fuj9s.png" alt=""/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071043003&di=bd50d6b46a0e722c5171709ec4e1e428&imgtype=0&src=http%3A%2F%2Fimg.bqatj.com%2Fimg%2F5d7ce594f8a17de5.jpg" alt=""/>
<img src="http://n.sinaimg.cn/games/transform/25/w550h275/20181101/Xb0F-hnfikve1647368.png" alt=""/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541666075&di=649c870b2ee7397705901f3b982fa8f8&imgtype=jpg&er=1&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8ad4b31c8701a18bef2f8665952f07082938fed0.jpg" alt=""/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071440447&di=4ae1d8af2c3a1021e3e735534683a92f&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F019c2958a2b760a801219c77a9d27f.jpg" alt=""/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071468776&di=23264b398f2daa74b94348f42767f1a6&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F339%2F26093.jpg" alt=""/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071481739&di=2f8b1a4cacadf1928853f83621b8e4e5&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F012a1b59119217a801216a3e14fb6c.jpg" alt=""/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071494796&di=6cbf38c10e1ac03a20a5e8cb1d09d132&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0144045568e29f0000012716820602.jpg%401280w_1l_2o_100sh.jpg" alt=""/>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3333131219,1856818389&fm=26&gp=0.jpg" alt=""/>
<img src="http://img0.imgtn.bdimg.com/it/u=1532647500,2553956028&fm=26&gp=0.jpg" alt=""/>

</body>
</html>


3、实时获取加载数据的进度条

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实时获取加载数据的进度条</title>
    <style>
        *{margin: 0;padding: 0;}
        .loading{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 100;}
        .pic{width: 100px;height: 100px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;line-height: 100px;text-align: center;font-size: 35px;}
        .pic span{width: 80px;height: 80px;position: absolute;top: 10px;left: 10px;border-radius: 50%;-webkit-box-shadow: 0 3px 0 #666;box-shadow: 0 3px 0 #666;-webkit-animation: rotate 1s infinite linear;animation: rotate 1s infinite linear;}
        @-webkit-keyframes rotate {
            0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
            100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            var num=0;
            $('img').each(function(i){
                var oImg=new Image()
                oImg.onload=function(){
                    oImg.onload=null;
                    num++;
                    $('.loading b').html(parseInt(num/$('img').size()*100)+'%')
                    if(num>=i){
                        $('.loading').fadeOut()
                    }
                }
                oImg.src=$('img')[i].src
            })
        })

    </script>
</head>
<body>
<div>
    <div class="loading">
       <div class="pic">
           <span></span>
           <b></b>
       </div>
    </div>
    <img src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=3&spn=0&di=67346977170&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3534289497%2C3677101726&os=4256696858%2C44776407&simid=4095342090%2C610126790&adpicid=0&lpn=0&ln=1707&fr=&fmq=1541059903842_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fpic19.nipic.com%2F20120210%2F7827303_221233267358_2.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bgtrtv_z%26e3Bv54AzdH3Ffi5oAzdH3Fcmla0am_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0&islist=&querylist=" alt=""/>
    <img src="http://en.wuxi.gov.cn/upload/201810/7ac1n57fuj9s.png" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071043003&di=bd50d6b46a0e722c5171709ec4e1e428&imgtype=0&src=http%3A%2F%2Fimg.bqatj.com%2Fimg%2F5d7ce594f8a17de5.jpg" alt=""/>
    <img src="http://n.sinaimg.cn/games/transform/25/w550h275/20181101/Xb0F-hnfikve1647368.png" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541666075&di=649c870b2ee7397705901f3b982fa8f8&imgtype=jpg&er=1&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8ad4b31c8701a18bef2f8665952f07082938fed0.jpg" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071440447&di=4ae1d8af2c3a1021e3e735534683a92f&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F019c2958a2b760a801219c77a9d27f.jpg" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071468776&di=23264b398f2daa74b94348f42767f1a6&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F339%2F26093.jpg" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071481739&di=2f8b1a4cacadf1928853f83621b8e4e5&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F012a1b59119217a801216a3e14fb6c.jpg" alt=""/>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541071494796&di=6cbf38c10e1ac03a20a5e8cb1d09d132&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0144045568e29f0000012716820602.jpg%401280w_1l_2o_100sh.jpg" alt=""/>
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3333131219,1856818389&fm=26&gp=0.jpg" alt=""/>
</div>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/Dj_Fairy/article/details/83652538
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022