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 弹性布局快速入门
Jun 06 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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代码
2010/08/08 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python中正则表达式的用法总结
2019/02/22 Python
python 穷举指定长度的密码例子
2020/04/02 Python
2014年电工工作总结
2014/11/20 职场文书
医德医风自我评价2015
2015/03/03 职场文书
预备党员自我评价范文
2015/03/04 职场文书
2015大学迎新标语
2015/07/16 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
python小型的音频操作库mp3Play
2022/04/24 Python
Java 多线程协作作业之信号同步
2022/05/11 Java/Android
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS