html 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="32.4" 
			  stroke-dashoffset="32.4"/>
	</g>
</svg>

查看效果

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