关键词：
本次案例主要使用了svg的三个元素，分别为circle、text、path，关于svg的介绍大家可以看MDN上的相关教程，传送门
由于svg可以写到HTML中，所以这里我们就可以很方便的做进度条加载动画啦，这次案例以vue来做数据交互
svg的viewBox
viewBox属性定义了画布上可以显示的区域，viewBox有4个值，值1为svg窗口起点显示的x坐标，值2位svg窗口起点的y坐标， 后面的两个分别为显示的大小; 平常可以通过后面这两个值对svg图形进行放大和缩小， 前面的两个值进行窗口位置的变换
在demo中为了方便计算svg元素的中心，我设置为（0, 0) 即圆的坐标方程满足 x^2 + y^2 = r^2
circle元素
circle元素在svg中可以画一个圆，主要属性为cx(圆心x坐标)、cy（圆心y左边）、r（圆的半径）
text元素
svg中显示字体的元素，text-anchor、dominant-baseline分别可以设置字体的左右、上线对齐方式
path元素
svg中所有的基本元素都可以通过path路径画出来，该元素只有一个属性d，动画的效果就是通过不断改变d的值来达到的；
在这里只需要掌握d的A命令即可，传送门
效果图以及代码
<div id="app">
<svg width="100" height="100" viewBox="-50 -50 100 100">
<circle cx="0" cy="0" stroke-width="6" fill="none" stroke="#ddd" :r="r"/>
<path :d="d" fill="none" stroke-width="6" stroke="#369"/>
<text text-anchor="middle" dominant-baseline="middle"> ratio %</text>
</svg>
</div>
new Vue(
el: '#app',
data:
ratio: 1,
r: 47
,
computed:
d()
const ratio = this
return this.getD(ratio)
,
methods:
getD(ratio)
if (ratio >= 100)
ratio = 99.999
const angle = Math.PI / 50 * ratio
const r = this.r
const x = r * Math.cos(angle)
const y = -r * Math.sin(angle)
const isBigAngle = Number(ratio > 50)
return `M 47 0 A 47 47 0 $isBigAngle 0 $x $y`
,
mounted()
let timer = setInterval(() =>
if (this.ratio > 100)
this.ratio = 100
clearInterval(timer)
timer = null
return
this.ratio += 1
, 16)
)
ps：第一次写博客，发现表达能力真的好差；
环形进度条组件(代码片段)
<template><divclass="content"ref="box"><svg:id="idStr"style="transform:rotate(-90deg)":width="width":height="width 查看详情
svg的圆形进度条(代码片段)
目前发现svg实现一些动画效果是比较高效简单的。如圆形进度条，只要会stroke-dasharray与stroke-dashoffset属性基本就可以实现，而且美观。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title 查看详情
css如何用css动画svg的填充颜色？(代码片段)
环形进度条组件(代码片段)
<template><divclass="content"ref="box"><svg:id="idStr"style="transform:rotate(-90deg)":width="width":height="width"xmlns="http://www.w3.org/2000/svg"><linearGradient:id="`gradient-$id... 查看详情
用初中数学知识撸一个canvas环形进度条(代码片段)
...条组件vue-awesome-progress。近日被设计小姐姐要求实现这么一个环形进度条效果，大体由四部分组成，分别是底色圆环，进度弧，环内文字，进度圆点。设计稿截图如下：我的第一反应还是找现成的组件，市面上很多组件都实现了... 查看详情
如何用matlab为小姐姐跳舞视频增添另一个小姐姐跳舞进度条(代码片段)
注：本人非常清楚这项任务使用pr会简单很多，此篇文章只是为了探究matlab能干啥的边界。并作为一个熟悉matlab矩阵操作和视频音频操作的例子。效果如下：（怕侵权就只放个动图）可以看到小姐姐的舞蹈非常... 查看详情
如何用matlab为小姐姐跳舞视频增添另一个小姐姐跳舞进度条(代码片段)
注：本人非常清楚这项任务使用pr会简单很多，此篇文章只是为了探究matlab能干啥的边界。并作为一个熟悉matlab矩阵操作和视频音频操作的例子。效果如下：（怕侵权就只放个动图）可以看到小姐姐的舞蹈非常... 查看详情
如何用jquery制作进度条？
】如何用jquery制作进度条？【英文标题】：howtomakeaprogressbarwithjquery?【发布时间】：2012-02-0713:34:48【问题描述】：我想知道如何将其制作为简单的代码。我在一个网站上找到了一些我想用于我正在开发的网站的东西。问题是我试... 查看详情
csssvg环形进度条-5(代码片段)
htmlsvg环形进度条-7(代码片段)
csssvg环形进度条-3。(代码片段)
htmlsvg环形进度条-4(代码片段)
htmlsvg环形进度条-2(代码片段)
htmlsvg环形进度条-1(代码片段)
如何用jquery显示进度条？(代码片段)
只是告诉用户您的请求正在处理中。编辑：我发现自己是一个形象。（来源：maishudi.com）如何在整页的中心显示它？答案ProgressbarjQueryprogressbarProgressBars&Controls另一答案http://plugins.jquery.com/project/jQueryProgressBar$(document).ready(functio... 查看详情
qt编写自定义控件14-环形进度条(代码片段)
...即当前进度90%，剩余的10%也需要设置成不同的颜色，还有一个重要的功能是，能够指定多个警戒值，一旦超过或者小于该值，则当前进度自动切换到预先设定的警戒值颜色，而不需要用户自己去判断警戒值去设置警戒颜色， 查看详情