svg 进度条
先看理想效果
先上代码,在进行解释
<div id="app">
<svg width="230" height="230" viewBox="0 0 230 230" transform="rotate(90),scale(-1,1)">
//进度条渐变色
<defs>
<linearGradient id="orange" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#F34D4D"/>
<stop offset="100%" stop-color="#F27D31"/>
</linearGradient>
</defs>
//进度条渐变
//外层圆
<circle cx="115" cy="115" r="87" fill="none" stroke="#f7f7f7" stroke-width="30" />
//外层圆
//内容圆
<circle cx="115" cy="115" r="87" fill="none" stroke="url(#orange)" stroke-width="12" stroke-dasharray="50,547" :stroke-dashoffset="dashOffsetCircle" stroke-linecap="round" />
//内层圆
</svg>
</div>
svg: witdh:230单位,
height: 230单位,注意不是px 是单位
viewBox="x轴摆放的位置 y轴摆放的位置 在视图内显示的x大小 在视图内显示y的大小", svg 可以理解为相框,viewBox 相当于设定内容的摆放位置与缩放
transform 与 css 理解一致
defs: 设定填充颜色
circle: 为设置圆标签
cx: 圆心在x轴的位置
cy: 圆心在y轴的位置
fill: 设置绘制图案的填充颜色或图案
stroke: 定制绘制线的颜色
stroke-width: 绘制线的宽度
stroke-dasharray: 设置实线和虚线的宽度
stroke-dashoffset: 实线虚线绘制的起点距路径开始的距离
stroke="url(#orange)" 引用defs 上的渐变色
svg 进度条的更多相关文章
- ProgressBar.js – 漂亮的响应式 SVG 进度条
ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆 ...
- 分享9款极具创意的HTML5/CSS3进度条动画
1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...
- 9款极具创意的HTML5/CSS3进度条动画(免积分下载)
尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...
- 9个绚丽多彩的HTML5进度条动画赏析
进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发 ...
- 9款极具创意的HTML5/CSS3进度条动画
今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的 ...
- 类似 Dribbble 下载按钮的 SVG 弹性动画进度条
Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现.按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个 ...
- html5 svg 圆形进度条
html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
- 如何用SVG写一个环形进度条以及动画
本次案例主要使用了svg的三个元素,分别为circle.text.path,关于svg的介绍大家可以看MDN上的相关教程,传送门 由于svg可以写到HTML中,所以这里我们就可以很方便的做进度条加载动 ...
随机推荐
- k8s&docker面试总结
花了大半个月对k8s&docker进行了梳理,包括之前读过的书,官方文档以及k&d在公司项目的实践等. 以下是个人对docker & k8s 面试知识点的总结: 1 docke ...
- JVM学习(六)JVM常见知识问答
文章更新时间:2020/04/21 1.什么是Java虚拟机?为什么Java被称作是"平台无关的编程语言"? Java虚拟机是一个可以执行Java字节码的虚拟机进程. Java源文 ...
- 215。数组中第K个最大元素(堆实现)
class Solution: def findKthLargest(self, nums: List[int], k: int) -> int: """堆排序思想 ...
- Centos-当前登录用户信息- w who
w who 显示当前登录系统的用户,但w显示的更为详细 who 相关参数 # 默认输出 用户名.登录终端.登录时间 -a 列出所有信息 -b 系统最近启动日期 -m 当前终端信息,相当于 w ...
- Go-归档文件-tar
文件归档 tar 1. 创建一个tar头部并自动填充tar头部信息 tar.FileInfoHeader() 联合 os.Stat() 方法 2. 手动填写 tar头部信息 tar.Header{} ...
- AES加密 Pkcs7 (BCB模式) java后端版本与JS版本对接
1.BCB模式是需要设置iv偏移量和Key值,这两个值就像账号和密码一样,当这两个值一致时才能确保加密和解密的数据一致.(ps:这两个值千万不能暴露出去哦!) 2.JAVA版本代码: 这里的iv偏移量 ...
- 前端gitlab-ci.yml 入门
说起来使用gitlab也有大半年了,每天都在跑pipeline,但是却没有好好研究过这个叫gitlab-ci.yml的文件.这次借着发布流程升级的机会,好好入门了一下. 主要分以下内容: stages ...
- Python-joypy和 R-ggridges 峰峦图制作
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 以下文章来源于DataCharm,作者 宁海涛 转载地址 https://www ...
- 栈和队列数据结构的基本概念及其相关的Python实现
先来回顾一下栈和队列的基本概念: 相同点:从"数据结构"的角度看,它们都是线性结构,即数据元素之间的关系相同. 不同点:栈(Stack)是限定只能在表的一端进行插入和删除操作的线性 ...
- Nginx(五)、http反向代理的实现
上一篇nginx的文章中,我们理解了整个http正向代理的运行流程原理,主要就是事件机制接入,header解析,body解析,然后遍历各种checker,以及详细讲解了其正向代理的具体实现过程.这已经 ...