loading-css

来源：互联网发布：linux 线程等待编辑：程序博客网时间：2024/06/07 18:49

效果如下：
这里写图片描述

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>定时器的进度条</title>    <style>        .loading {            width: 100%;            height: 100%;            position: fixed;            top: 0;            z-index: 100;            background: #fff;        }        .loading .pic {            width: 50px;            height: 60px;            position: absolute;            top: 0;            bottom: 0;            left: 0;            right: 0;            margin: auto;        }        .loading .pic i{            display: block;            float:left;            width:6px;            height:50px;            background:#399;            margin:0 2px;            transform:scaleY(0.4);            animation:load 1.2s infinite;        }        .loading .pic i:nth-child(2){            animation-delay:0.1s;        }        .loading .pic i:nth-child(3){            animation-delay:0.2s;        }        .loading .pic i:nth-child(4){            animation-delay:0.3s;        }        .loading .pic i:nth-child(5){            animation-delay:0.4s;        }        @keyframes load{            0%,40%,100%{                transform:scaleY(0.4)            }            20%{                transform:scaleY(1)            }        }    </style></head><body><div class="loading">    <div class="pic">        <i></i><i></i><i></i><i></i><i></i></div></div></body></html>

其他问题：

兼容性

通过网址：

http://autoprefixer.github.io

.loading {            width: 100%;            height: 100%;            position: fixed;            top: 0;            z-index: 100;            background: #fff;        }        .loading .pic {            width: 50px;            height: 60px;            position: absolute;            top: 0;            bottom: 0;            left: 0;            right: 0;            margin: auto;        }        .loading .pic i{            display: block;            float:left;            width:6px;            height:50px;            background:#399;            margin:0 2px;            -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;        }        .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;        }        @-webkit-keyframes load{            0%,40%,100%{                -webkit-transform:scaleY(0.4);                        transform:scaleY(0.4)            }            20%{                -webkit-transform:scaleY(1);                        transform:scaleY(1)            }        }        @keyframes load{            0%,40%,100%{                -webkit-transform:scaleY(0.4);                        transform:scaleY(0.4)            }            20%{                -webkit-transform:scaleY(1);                        transform:scaleY(1)            }        }

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>定时器的进度条</title>    <style>        .loading {            width: 100%;            height: 100%;            position: fixed;            top: 0;            z-index: 100;            background: #fff;        }        .loading .pic {            width: 50px;            height: 60px;            position: absolute;            top: 0;            bottom: 0;            left: 0;            right: 0;            margin: auto;        }        .loading .pic i{            display: block;            float:left;            width:6px;            height:50px;            background:#399;            margin:0 2px;            -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;        }        .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;        }        @-webkit-keyframes load{            0%,40%,100%{                opacity:0.7;                -webkit-transform:scaleY(0.4);                transform:scaleY(0.4)            }            20%{                opacity:1;                -webkit-transform:scaleY(1);                transform:scaleY(1)            }        }        @keyframes load{            0%,40%,100%{                opacity:0.7;                -webkit-transform:scaleY(0.4);                transform:scaleY(0.4)            }            20%{                opacity:1;                -webkit-transform:scaleY(1);                transform:scaleY(1)            }        }    </style></head><body><div class="loading">    <div class="pic">        <i></i><i></i><i></i><i></i><i></i></div></div><script></script></body></html>

阅读全文

0 0