用svg实现一个环形进度条
svg实现环形进度条需要用到的知识:
1、会使用path的d属性画一个圆环
//用svg的path元素的A命令画圆 <path d=" M cx cy m 0 -r a r r 0 1 0 0 2r a r r 0 1 0 0 -2r" > ></path> //cx cy起点 r 半径
2、熟悉stroke,stroke-linecap,stroke-width,stroke-dasharray、stroke-dashoffset
话不多说,直接上代码
<div style="width: 200px;height: 200px;"> <svg viewBox="0 0 100 100"> <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" fill="none" stroke="#e5e9f2" stroke-width="5"> ></path> <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0 a 40 40 0 1 0 -80 0" fill="none" stroke="#20a0ff" stroke-linecap="round" class="my-svg-path" transform="rotate(90,50,50)" stroke-width="5"> </path> </svg> </div>
.my-svg-path{ stroke-dasharray: 252.2px, 252.2px; stroke-dashoffset: 22px; transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s; transform: rotateZ(90deg); transform-origin: 50% 50%; }
效果:
本文来自博客园,作者:_zhiqiu,转载请注明原文链接:https://www.cnblogs.com/guojikun/p/10663487.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2017-04-06 判断浏览器类别及版本