标签：rotate 进度条 svg dashoffset transform keyframes stroke html 0%

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>

查看效果

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

标签：rotate,进度条,svg,dashoffset,transform,keyframes,stroke,html,0%
来源： https://blog.csdn.net/qq_24683975/article/details/112435650

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。