css3实现加载进度条的效果(一)

记录下css3学习中的有趣的地方,先看下我们的实现效果！很简单，但是需要有css设计思想才能做到，

<div  class="progress-bar blue stripes">
        <span id="blue"></span>
    </div>

这要的html就这两个
黑色背景

   body{
           background: url("./bg.png") repeat;
        }	
    .progress-bar{
        width: 350px;
        background-color: #1a1a1a;
        height: 35px;
        margin: 70px auto 0;
        padding: 5px;
        border-radius: 5px;
        box-shadow: 0 1px 5px  #000 inset,0 1px 0 #444; //双层阴影
    }

蓝色的条纹css

		.blue span {
            background-color: #34c2e3;
            color:#fff;
            text-align: center;
            line-height: 2;
        }

css3渐变实现，关键代码

		.stripes span {
            background-size: 30px 30px;
            background-image: linear-gradient(135deg, rgba(7, 47, 100, 0.432) 25%,
                            transparent 25%,
                            transparent 50%, 
                            rgba(7, 47, 100, 0.432) 50%,
                             rgba(7, 47, 100, 0.432) 75%,
                            transparent 75%, 
                            transparent);
            animation: animate-stripes 3s linear infinite;
        }
		@keyframes animate-stripes {
		            0% {
		            background-position: 0 0;
		            }
		            100% {
		            background-position: 120px 0;
		        }

最后实现百分比数字的动画效果

			let dom = document.getElementById('blue')
            let w = 100;
            
            let timer = setInterval(() => {
                if (w < 350) {
                    w += 1;
                    //处理小数的显示
                    dom.innerHTML = Math.floor(w / 350 * 100) + '%'
                    dom.style.width = w + "px"
                } else {
                    alert("加载完毕")
                    clearInterval(timer)
                }
            }, 100)

至此，我们的效果就实现了！