进度条制作

:after 选择器向选定的元素之后插入内容。
hidden 内容会被修剪，并且其余内容是不可见的。
.text span{
animation: myfirst 2s infinite ease;设置文字一直上下浮动
display: inline-block; 非常重要
}
@keyframes myfirst{ 设置单个字上下浮动的动画
0% {transform:translateY(5px)};
25%{transform:translateY(0)};
50% {transform:translateY(-5px)};
75% {transform:translateY(0px)};
100%{transform:translateY(5px)};
}
L设置交错浮动延迟时间
O设置交错浮动延迟时间

设置进度条注意使用相对位置和绝对位置，以及after，动画（只用设置颜色起始点和背景色，不用设置旋转平移等等）
.loading{
border:1px solid black;
border-radius: 10px;
width: 150px;
height: 20px;
margin-top:20px;
margin-left:20px;
position: relative;重要
overflow: hidden; 重要
}
.loading:after{
content: '';
animation: mytwo 5s infinite ease;
position:absolute;
border-radius: 10px;
top:0px;上下左和宽度占比很重要，如果不设置出不来
bottom:0px;
left:100%;
width: 100%;
/background-color: blanchedalmond;/

        }
        @keyframes mytwo{
            0% {left:-100%;background-color:blueviolet} -100%表示从起点开始，也很重要
            25%{background-color:red}
            50% {background-color:yellow;}
            75% {background-color:green;}
            100%{left:0;background-color:pink;}
        }