svg实现环形进度条

实现效果图:
在这里插入图片描述

svg相关知识

这里只介绍本次用到的元素,更多详情:SVG:可缩放矢量图形

  • defs:定义需要重复利用的图形元素
  • linearGradient:定义线性渐变,用来图形元素的填充或描边使用
  • stop:元素或者元素的子元素,用来描述渐变色的坡度
  • circle:基于圆心和半径创建圆形
  • cx:定义中心点的x坐标
  • cy:定义中心点的y坐标
  • r:定义圆的半径
  • fill:(对于形状元素)用来定义内部颜色
  • stroke:图形外轮廓颜色
  • stroke-width:外轮廓宽度
  • stroke-dasharray:描边的点划线的图案范式(线段,直线。。。)
  • stroke-linecap:开放自路径两端的形状(平角,圆角)
  • transform:用来设置动画(非svg属性)

实现代码

1. 定义一个可复用的渐变色

<defs>
    <linearGradient id="color">
        <stop offset="0%"  stop-color="#229453"/>
        <stop offset="50%"  stop-color="#66c18c"/>
        <stop offset="100%" stop-color="#b9dec9"/>
    </linearGradient>
</defs>

2. 增加一个外圈的圆,用来包住进度条(旋转整个圆,使缺口朝下)

<circle cx='160' cy='160' r='140' stroke='#999999' stroke-width="20" fill="none" stroke-dasharray="659,300" stroke-linecap="round" transform="rotate(135, 160, 160)"></circle>

3. 增加一个内部的圆,当进度条背景

<circle cx='160' cy='160' r='140' stroke='#ffffff' stroke-width="10" fill="none"  stroke-dasharray="659,300" stroke-linecap="round" transform="rotate(135, 160, 160)"></circle>

4. 增加进度条的圆(动画是为了有进度条移动的效果)

<circle id="circle" cx='160' cy='160' r='140' stroke='url(#color)' stroke-width="10" fill="none" style="stroke-dasharray: 0,900; transition: stroke-dasharray 2s" stroke-linecap="round" transform="rotate(135, 160, 160)"></circle>

5. 写一点js代码来改变进度条长度

const circle = document.getElementById('circle')
setTimeout(()=> {
  circle.style.strokeDasharray = '600,500'
}, 2000)

完整代码

<div>
      <svg style="background: #ffffff" width="320" height="320"  viewBox="0 0 320 320">
        <defs>
            <linearGradient id="color">
                <stop offset="0%"  stop-color="#229453"/>
                <stop offset="50%"  stop-color="#66c18c"/>
                <stop offset="100%" stop-color="#b9dec9"/>
            </linearGradient>
        </defs>
        <circle cx='160' cy='160' r='140' stroke='#999999' stroke-width="20" fill="none" stroke-dasharray="659,300" stroke-linecap="round" transform="rotate(135, 160, 160)"></circle>
        <circle cx='160' cy='160' r='140' stroke='#ffffff' stroke-width="10" fill="none"  stroke-dasharray="659,300" stroke-linecap="round" transform="rotate(135, 160, 160)"></circle>
        <circle id="circle" cx='160' cy='160' r='140' stroke='url(#color)' stroke-width="10" fill="none" style="stroke-dasharray: 0,900; transition: stroke-dasharray 2s" stroke-linecap="round" transform="rotate(135, 160, 160)"></circle>
      </svg>
    </div>
const circle = document.getElementById('circle')
setTimeout(()=> {
 circle.style.strokeDasharray = '600,500'
}, 2000)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/505643.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

hcip综合实验2

目录 实验拓扑&#xff1a; 实验要求&#xff1a; 实验思路&#xff1a; 实验步骤&#xff1a; 1.配置设备接口IP 2.通过配置缺省路由让公网互通 3.配置ppp 1.R1和R5间的ppp的PAP认证&#xff1b; 2.R2与R5之间的ppp的CHAP认证; 3. R3与R5之间的HDLC封装; 4.构建R1、…

动态规划之子序列(三)

583. 两个字符串的删除操作 给定两个单词 word1 和 word2&#xff0c;找到使得 word1 和 word2 相同所需的最小步数&#xff0c;每步可以删除任意一个字符串中的一个字符。 示例&#xff1a; 输入: “sea”, “eat” 输出: 2 解释: 第一步将"sea"变为"ea"…

c实现猜数游戏(猜不对可是要自动帮你电脑关机)

接下来的日子会顺顺利利&#xff0c;万事胜意&#xff0c;生活明朗-----------林辞忧 前言 猜数字游戏作为一个基础的C程序小项目&#xff0c;实现简单&#xff0c;可以帮助我们巩固很多知识&#xff0c;作为扩展接下来我们实现一个自定猜数次数&#xff0c;用完次数电脑自动…

keepalived+LVS高可用部署

目录 一.两台设备&#xff08;2.130和2.133&#xff09;作为调度器&#xff0c;前主后备 1.部署keepalived 2.修改配置文件准备启动 3.配置keepalived的系统日志并启动 二.模拟调度器掉点和web服务进程丢失 1.调度器掉点 2.当类似于httpd这种网站服务掉点 三.以三种健康…

【从前端入门到全栈】前端框架之核心概念

大家好&#xff0c;我是江辰&#xff0c;从前端入门到全栈是我全新系列文章&#xff0c;从去年一直囔囔着要写&#xff0c;今年总算开始了&#xff01;预计在10篇左右。知识面从 前端&#xff0c;后端&#xff0c;运维&#xff0c;脚本等&#xff0c;都有涉及&#xff0c;主打一…

Spark-Scala语言实战(9)

之前的文章中&#xff0c;我们学习了如何在spark中使用RDD方法的flatMap,take,union。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 Spark-Scala语言实战&am…

数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属的专栏&#xff1a;数据分析系统化教学&#xff0c;零基础到进阶实战 景天的主页&#xff1a;景天科技苑 文章目录 Streamlit什么是streamli…

基于springboot+vue实现的学校田径运动会管理系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…

CommunityToolkit.Mvvm----配置

一、介绍&#xff1a; CommunityToolkit.Mvvm 包&#xff08;又名 MVVM 工具包&#xff0c;以前称为 Microsoft.Toolkit.Mvvm&#xff09;是一个现代、快速和模块化的 MVVM 库。 它是 .NET 社区工具包的一部分&#xff0c;围绕以下原则生成&#xff1a; 独立于平台和运行时 - …

MySQL MHA高可用配置以及故障切换

目录 什么是 MHA 什么是 MHA MHA&#xff08;MasterHigh Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。解决主从架构中的主服务器的单点问题 MySQL故障切换过程中&#xff0c;MHA能做到0-30秒内自动…

计算机网络:数据链路层 - 封装成帧 透明传输 差错检测

计算机网络&#xff1a;数据链路层 - 封装成帧 & 透明传输 & 差错检测 数据链路层概述封装成帧透明传输差错检测 数据链路层概述 从数据链路层来看&#xff0c;主机 H1 到 H2 的通信可以看成是在四段不同的链路上的通信组成的&#xff0c;所谓链路就是从一个节点到相邻…

python distribute是什么

Python的包管理工具常见的有easy_install, setuptools, 还有pip, distribute&#xff0c;那麽这几个工具有什么关系呢&#xff0c;看一下下面这个图就明白了&#xff1a; 可以看到distribute是setuptools的替代方案&#xff0c;pip是easy_install的替代方案。 Distribute提供一…

古代书法名家墨迹范本,中国法书碑帖图片合集

一、图片描述 在书法作品里&#xff0c;什么是法书&#xff1f;这是书法用语&#xff0c;又称法帖&#xff0c;学习书法可以作为楷模的范本&#xff0c;以及对古代名家墨迹的敬称&#xff0c;或以此誉称表达对书法作者的尊重之意&#xff0c;法书墨迹是最能反映古代书法艺术面…

Windows-安装infercnv包(自备)

目录 安装基础 ①安装JAGS a,找到适配版本 b&#xff0c;install for me only安装路径 ②安装"rjags"包 ③安装inferCNV 安装基础 版本&#xff1a; R version 4.2.2 (2022-10-31 ucrt) -- "Innocent and Trusting"安装的JAGS版本为JAGS 4.3.1 首…

Nginx_简介 + Linux系统下详细安装教程指路

安装教程指路 可参看该视频【尚硅谷Nginx教程&#xff08;亿级流量nginx架构设计&#xff09;】 https://www.bilibili.com/video/BV1yS4y1N76R/?p2&share_sourcecopy_web&vd_source4c2f33f3ba1a0dd45bfdf574befd0069 的p2-p7。从安装centos虚拟机到在虚拟机上安装ng…

考研数学|听完一遍汤家凤基础,1800都没思路,怎么办?

看了我这篇回答&#xff0c;保证你可以顺利的做1800题&#xff01; 如果你听了汤家凤老师的课&#xff0c;但是做题没思路&#xff0c;请不要担心&#xff0c;也不要急着换老师&#xff0c;你很有可能是方法错了。 请你反思一下&#xff1a; 1、你是不是听完课立刻就去做题。…

Qt QWebSocket讲解

QWebSocket 是 Qt 框架中用于处理 WebSocket 通信的类。WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。这使得客户端和服务器之间可以进行实时交互&#xff0c;而无需频繁地建立和关闭连接。 QWebSocket 的基本使用 创建 QWebSocket 对象&#xff1a; 你可以创建一个…

LoRa物联网行业解决方案 1

1 行业应用 智慧停车 智能抄表 智慧牧场 智能生产 智能物流 智能健康 2 物联网智慧农场项目需求 3 为什么选lora&#xff1f; 4 设计 5 模块性能参数 sx1278 lora扩频无线模块 SEMTECH公司SX1278芯片 LoRa 扩频技术 通信距离10000米 SPI通信接口 mcu选型 硬件平台介绍 …

【Java多线程】7——阻塞队列线程池

7 线程池 ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记仓库&#x1f449;https://github.com/A-BigTree/tree-learning-notes 个人主页&#x1f449;https://www.abigtree.top ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个star~&#x…

卷积篇 | 引入可改变核卷积AKConv:具有任意采样形状和任意数目参数的卷积核

前言:Hello大家好,我是小哥谈。可改变核卷积(AKConv)是一种深度学习中的卷积神经网络(CNN)结构,它可以根据需要自适应地改变其卷积核。AKConv相对于传统的卷积神经网络,具有更高的灵活性和适应性,可以在不同的任务和数据集上实现更好的性能。🌈 目录 🚀1…