使用SVG实现圆环loading进度效果
来源:互联网 发布:张国荣但愿人长久知乎 编辑:程序博客网 时间:2024/06/05 05:51
效果
当我们想实现这样一个loading效果,有这么几种选择,第一种是使用canvas,第二种是借助css3的transform属性。这两种方法有一个问题,在webkit内核的浏览器上存在毛边。那么如果只兼容IE9+的浏览器,可以考虑使用SVG
具体代码
SVG的实现效果非常简单
<svg width="440" height="440" VIEWBOX="0 0 440 440"> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none"></circle> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle> </svg>
实现这个效果的关键因素在于stroke-dasharray="0 1069"
第一个参数代表蓝色进度条的长度,第二个参数代表灰色背景的长度。这里两个参数的和必须是1069,也就是圆的周长
如果我们想拖动下面的进度条自动更新进度,只需要通过js改变这个属性值就可以。js代码如下所示
if(window.addEvenetListener){ var range = document.getElementById('range'); if(!range) return; //获得第二个圆的引用 var circle = range.getElementsByTagName('circle')[1]; range.addEvenetListener('change', function(){ var percent = this.value / 100; //圆的周长 var perimeter = Math.PI * 2 * 170; //stroke-dasharray属性的两个参数和必须为周长 circle.setAttribute('stroke-dasharray', perimeter * percent + ' ' + perimeter. * (1 - percent)); }) }
css代码如下所示
circle { -webkit-transition: stroke-dasharray .25s; transition: stroke-dasharray .25s; }
stroke-dasharray在SVG中描边是代表虚线,第一个参数是虚线的宽度,第二个参数是虚线之间的间距。默认stroke-dasharray的起始位置在右侧,而不是上方,因此,我们需要使用transform逆时针旋转90°, 这就是第二个circle元素上面transform=”matrix(0,-1,1,0,0,440)”的由来。(iOS 手机上,transform逆时针旋转90°只会改变图形外观,但是其坐标起始位置还是右侧。因此,更改起始坐标可能还需要通过外部容器旋转控制。)
0 0
- 使用SVG实现圆环loading进度效果
- SVG实现圆环loading进度效果实例页面
- 使用 SVG,实现带动画效果的圆环进度条
- Ionic2 使用loading组件实现下载进度显示效果
- swift3.0 实现自定义圆环进度提示效果
- Android自定义圆环Loading效果
- 自定义view,实现圆环进度
- 自定义View实现进度圆环
- svg实现loading图
- CSS3制作圆环进度动画效果
- 圆环进度
- 圆环进度
- SVG初步了解,制作圆圈进度效果
- canvas绘制圆环百分比进度的动态效果
- 自定义控件,动画效果的进度圆环RingProgressBar
- H5动画,canvas绘制圆环百分比进度的动态效果
- H5动画,canvas绘制圆环百分比进度的动态效果
- SVG实现攻击效果
- Python进阶(三十四)-Python3多线程解读
- Eclipse开发linux c/cpp---支持c++11特性
- iOS-远程推送自定义提示音
- 默认初始化
- linux 嵌入式开发板 iwlist、iwconfig、 iwpriv 命令使用
- 使用SVG实现圆环loading进度效果
- Google面试和一些玩具
- SPOJ DISUBSTR
- Material Design(一)
- 选择排序
- Arcgis: Coordinate Issue
- kafka+storm+redis整合
- 关于分布式事务、两阶段提交协议、三阶提交协议
- linux运算统计案例