html+css+svg+Android原生圆形进度条

htm+css+svg+Android原生圆形进度条

从Chrome中弄出来的 不多说 直接上代码

<svg xmlns="http://www.w3.org/2000/svg" version="1" 
	 width="16" height="16">
	<style>
		@keyframes rotate{
			0%{
				transform:rotate(0deg)
			}to{
				transform:rotate(360deg)
			}
		}
		@keyframes fillunfill{
			0%{
				stroke-dashoffset:32.3
			}50%{
				stroke-dashoffset:0
			}to{
				stroke-dashoffset:-31.9
			}
		}
		@keyframes rot{
			0%{
				transform:rotate(0deg)
			}to{
				transform:rotate(-360deg)
		}
		}@keyframes colors{
			0%,
			to{
				stroke:#4285f4
			}
		}
	</style>
	<g style="animation-duration:1568.63ms;
			  animation-iteration-count:infinite;
			  animation-name:rotate;
			  animation-timing-function:linear;
			  transform-origin:50% 50%;
			  width:16px;
			  height:16px">
		<path fill="none" 
			  d="M8 1.125A6.875 6.875 0 1 1 1.125 8" 
			  stroke-width="2.25" 
			  stroke-linecap="round" 
			  style="animation-duration:1333ms,5332ms,5332ms;
			  animation-fill-mode:forwards;
			  animation-iteration-count:infinite,infinite,infinite;
			  animation-name:fillunfill,rot,colors;
			  animation-play-state:running,running,running;
			  animation-timing-function:cubic-bezier(.4,0,.2,1),steps(4),linear;
			  transform-origin:50% 50%" 
			  stroke-dasharray="35.4" 
			  stroke-dashoffset="35.4"/>
	</g>
</svg>

查看效果

复制上面的代码到菜鸟教程查看效果：
查看效果