html svg生成环形进度条的实现方法


Posted in HTML / CSS onSeptember 23, 2019

之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制。具体效果如下图:

html svg生成环形进度条的实现方法

代码非常简单:

<svg width="150px" height="150px" class="svg">
    <circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
    <circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px"  stroke-dasharray="471px" />
</svg>

为了便于演示,我们先用css动画控制:

svg {
    transform: rotate(-90deg);
}
.progress {
    animation: rotate 1500ms linear both;
}
@keyframes rotate {
    from {
        stroke-dashoffset: 471px;
    }
    to {
        stroke-dashoffset: 0px;
    }
}

实现原理

实现原理非常简单,就是应用svg的stroke-dashoffset和stroke-dasharray属性。

stroke-dasharray

官方解释为可控制用来描边的点划线的图案范式,即定义虚线每段长度即虚线间间隔,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。

stroke-dashoffset

标识的是整个路径的偏移值。

通过控制虚线的间隔与偏移值,便可以行程各种各样的线条动画,当然我们还可以通过js控制,如下:

let path = document.querySelector('#path');
// 可获取路径的长度
let len = path.getTotalLength();
path.style.cssText = `stroke-dasharray:"${number}"`;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 #HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 #HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 #HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 #HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 #HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 #HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 #HTML / CSS
You might like
使PHP自定义函数返回多个值
2006/11/26 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
php除数取整示例
2014/04/24 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
php header函数的常用http头设置
2015/06/25 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
js实现文字滚动效果
2016/03/03 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
js实现二级导航功能
2017/03/03 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
基于滚动条位置判断的简单实例
2017/12/14 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python字符串格式化输出方法分析
2016/04/13 Python
python实现求最长回文子串长度
2018/01/22 Python
Django框架 querySet功能解析
2019/09/04 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
python批量修改文件名的示例
2020/09/27 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
北京银河万佳Java面试题
2012/03/21 面试题
安全标语大全
2014/06/10 职场文书
销售人员工作自我评价
2014/09/21 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
Moment的feature导致线上bug解决分析
2022/09/23 Javascript
table不让td文字溢出操作方法
2022/12/24 HTML / CSS