Html
    Css
    Js

    
                        
#wave {
	width:180px;
	height:180px;
	border:6px  rgba(255,108,0,0.5) solid;
	border-radius:50%;
	background-color:#222;
	font-size:90px;
	line-height:180px;
	text-align:center;
	color:white;
	position:relative;
	margin:0 auto;
	overflow:hidden;
	z-index:2;
}
#progress {
	width:200%;
	height:200%;
	border-radius:43%;
	background-color:rgba(255,108,0,0.5);
	position:absolute;
	left:-90px;
	top:90px;
	animation:Rota 3s linear infinite;
}
@-webkit-keyframes Rota {
	0% {
	transform:rotate(0deg);
}
100% {
	transform:rotate(360deg);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

加载进度条

4
      单手扶墙0
      2017/5/4 11:55:03
      看起来 挺不错的 回复
      huahuaniu1
      2017/5/3 11:46:36

      BUG不小啊,我把字体调成62像素之后,到100%还会向上走,而且波浪会倒着从上边出去。。。。好恐怖

      到1000%多了还没停

      回复
      huahuaniu1
      2017/5/3 11:42:50

      字体有点大,百分号都没了

      另外,向上浮动的波纹颜色调成蓝色调呗,海浪多好看

          纷飞舞0
          2017/5/4 11:40:29

          这个・・・你们可以自行改一下・・・

      回复