代码实现加载中的效果

最新推荐文章于 2023-01-09 22:44:28 发布

bianguanyue

最新推荐文章于 2023-01-09 22:44:28 发布

阅读量536

点赞数

文章标签： html

原文链接：https://segmentfault.com/a/1190000014333991

版权

竖线的进度条效果：利用分别设置5个<li>的高度变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .loading{
            width: 100px;
            height: 100px;
            border: 1px solid black;
       }
       .loading i{
               width:6px;
               height:50px;
               margin:0 2px;
               background:blue;
               display:inline-block;
               transform: scaleY(0.4);
               animation:loop 0.8s infinite;
               -webkit-animation:loop 0.8s infinite;
       }
       .loading i:nth-child(1){}
       .loading i:nth-child(2){
             animation-delay: 0.1s;
       }
       .loading i:nth-child(3){
             animation-delay: 0.2s;
       }
       .loading i:nth-child(4){
             animation-delay: 0.3s;
       }
       .loading i:nth-child(5){
             animation-delay: 0.4s;
       }

       @keyframes loop{
             0%,40%,100%{ transform: scaleY(0.4); }
          20%{ transform: scaleY(1); }
       }
    </style>
</head>
<body>
    <div class="loading">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</body>
</html>

转动的圆圈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       #loading{
             width: 100px;
             height: 100px;
             background: #FFFFFF;
             border: 1px solid black;
       }
       #loading .pic{
             width: 50px;
             height: 50px;
             border-radius: 50%;
             box-shadow: 0 2px 0 #666;
             animation: loop 1s infinite;
             -webkit-animation: loop 1s infinite;
       }
       @keyframes loop{
             0%{ transform: rotate(0deg); }
             100%{ transform: rotate(360deg ); }
       }
    </style>
</head>
<body>
    <div id="loading">
        <div class="pic"></div>
    </div>
</body>
</html>

2、利用页面的加载状态判断

页面加载状态改变时的事件：document.onreadystatechange
当前文档状态：document.readystate
有如下的状态：
（1）uninitialized-还未开始载入
（2）loading-载入中
（3）interactive-已加载，文档可以与用户开始交互
（4）complete-载入完成

document.onreadystatechange=function(){
            if(document.readyState=="complete"){
               $("loading").fadeOut()
            }
        }

3、文件上传进度加载提示

onprogress事件是XMLHttpRequest的子对象XMLHttpRequestUpload中的一个事件。该事件每隔100ms向客户端返回一次数据，包括文件已上传的大小loaded和总大小total.

xhr.upload.onprogress = function(evt){
  console.log(evt);  //evt是onprogress事件的对象
}

完整html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 外层div 进度条的整体视觉和位置设置 -->
    <div style="width:300px;height: 20px;border: 1px solid #CCC">
    <!-- 内层div  逐渐递增的进度条 -->
        <div id="jdt" style="height: 20px"></div>
    </div><br>
    <form action="" method="post" id="mainForm">
        选择文件：
        <input type="file" name="f">
        <input type="button" value="上传" onclick="upload()">
    </form>
    <script type="text/javascript">
        function upload(){
            // 获取表单对象
            var fm = document.getElementById("mainForm");
            // 实例化FormData对象
            var fd = new FormData(fm);
            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // console.log(xhr);
            // 调用open方法准备ajax请求
            xhr.open('post','upfile.php');

            var jdt = document.getElementById('jdt');
            // 绑定onprogress事件
            xhr.upload.onprogress = function(evt){
                // console.log(evt);
                // toFixed修正结果，只保留小数点后两位
                // 计算上传大小的百分比
                percent = (evt.loaded / evt.total).toFixed(2);
                // 设置进度条样式
                jdt.style.width = percent * 300 + 'px';
                jdt.style.background = 'skyblue';
            }

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    alert(xhr.responseText);
                }
            }
            // 发送ajax请求
            xhr.send(fd);
        }
    </script>
</body>
</html>

实现原理：

Submit时将加载效果显示出来： document.getElementById("loading").style.display = 'block';
在加载完成时将加载中效果隐藏：document.readyState=="complete"时，设置 document.getElementById("loading").style.display = 'none';

bianguanyue

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
代码实现加载中的效果

竖线的进度条效果：利用分别设置5个<li>的高度变化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .loadi...
复制链接

扫一扫