先看理想效果

先上代码,在进行解释

<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 进度条的更多相关文章

  1. ProgressBar.js – 漂亮的响应式 SVG 进度条

    ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆 ...

  2. 分享9款极具创意的HTML5/CSS3进度条动画

    1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

  3. 9款极具创意的HTML5/CSS3进度条动画(免积分下载)

    尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...

  4. 9个绚丽多彩的HTML5进度条动画赏析

    进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发 ...

  5. 9款极具创意的HTML5/CSS3进度条动画

    今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的 ...

  6. 类似 Dribbble 下载按钮的 SVG 弹性动画进度条

    Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现.按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个 ...

  7. html5 svg 圆形进度条

    html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  9. 如何用SVG写一个环形进度条以及动画

    本次案例主要使用了svg的三个元素,分别为circle.text.path,关于svg的介绍大家可以看MDN上的相关教程,传送门 由于svg可以写到HTML中,所以这里我们就可以很方便的做进度条加载动 ...

随机推荐

  1. 疑难杂症 | Excel VBA锁定指定单元格区域

    背景:锁定EXCEL表头 一.手动操作流程 其基本逻辑并不赋值,手动操作流程是: 1.取消所有单元格的"锁定"格式 CTRL+A,选中全部的单元格→单击右键→设置单元格格式→保护→ ...

  2. Redis常见的八道面试题

      一.memcached与redis的区别? 1.存储方式不同.memcached把数据全部存在内存之中,断电之后会挂掉,而redis虽然也用到了内存,但是会有部分数据存在硬盘中,保证数据持久性. ...

  3. tf.split函数的用法(tensorflow1.13.0)

    tf.split(input, num_split, dimension): dimension指输入张量的哪一个维度,如果是0就表示对第0维度进行切割:num_split就是切割的数量,如果是2就表 ...

  4. tomcat在linux下安装

    1.下载地址: https://tomcat.apache.org/download-90.cgi 2.上传linux 3.查看是否上传成功 4.解压: 5.进入后,查看README.md文件,可以查 ...

  5. MySQL5.7用户创建及权限管理

    一 用户.权限管理 1.1 用户 作用: 登录,管理数据库逻辑对象 定义: 用户名@'主机值' 主机值可以是主机名或IP地址,主机值中允许使用通配符 root@'10.0.0.%' root@'%' ...

  6. Java 审计之XXE篇

    Java 审计之XXE篇 0x00 前言 在以前XXE漏洞了解得并不多,只是有一个初步的认识和靶机里面遇到过.下面来 深入了解一下该漏洞的产生和利用. 0x01 XXE漏洞 当程序在解析XML输入时, ...

  7. Go-简介

    Go简介 Google开发,新的具有面向接口.函数式编程.并发编程特点的编译性强类型通用编程语言 Go核心 1. 接口 2. 并发编程 3. 函数 Go-接口 package main import ...

  8. Layman 使用ffmpeg-php扩展库实现视频截图(默认图)

    这几天做项目,其中一个需求是用户上传视频文件到服务器,然后服务器自动截取该视频的一帧作为该视频对应的缩略图,服务器端语言采用php编写,找了半天资料,发现ffmpeg-php可以满足该需求,所以下面简 ...

  9. matlab中upper 将字符串转换为大写

    参考:https://ww2.mathworks.cn/help/matlab/ref/fprintf.html?searchHighlight=fprintf&s_tid=doc_srcht ...

  10. P2783 有机化学之神偶尔也会作弊 题解

    题面 前言 这道题以前还是道(水)黑题,现在怎么降紫了???? 前置芝士 tarjain 缩点 倍增求LCA或树剖求LCA 脑子... 题意 给你一个无向图,要求你把所有的环缩成一个点.在新得到的图上 ...