前言

进度条多以圆形、直线以及仪表盘形来展示，难免会有ui出奇怪的样式，想要不一样的形状。组件自带没有自定义形状。

一、我们看下进度条的结构

如图，改变进度条形状重点就是在svg里的数据，第一个path是进度条的背景，第二个path是走进度的进度条。我们想要改进度条形状就是把path里的d改掉

二、怎么改path里数据

1.了解下svg

具体标签有

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
以上的标签都是画各种图的，要改进度条的形状就是改path能力强的就直接研究path吧
路径 <path>

2.其他svg标签转换成path

直接上能转换的链接
https://www.zhangxinxu.com/sp/path.html

个人觉得研究其他标签要比研究path简单点，网上也能找到很多形状（下面是网上找到的五角星）

3.最关键的一步

// progress 是我自己定义的class,根据实际来
.progress svg path {d: path(/* "M50 15 h26.5a5 5 0 0 1 5 5v73a5 5 0 0 1 -5 5h-53.9a5 5 0 0 1 -5 -5 v-73 a5 5 0 0 1 5 -5 z" *//* "M100 10L40 198 190 78 10 78 160 198z" */"M50 48L 33 97 76 68 24 68 63 98z") !important;
}
.progress svg path:first-child {stroke: rgb(255, 237, 211);
}

转换完是M100 10L40 198 190 78 10 78 160 198z，但是组件自带样式，还得适配组件的（根据组件的样式来，d不是固定的），网页上看着改变数据。

最终效果，起点是正上放，想换起点可以稍微研究下path。这里组件:width=“390”。

elementui自定义进度条形状相关推荐

android自定义进度条渐变色View，不使用任何图片资源
最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自 ...
android 自定义进度条旋转,Android_Android ProgressBar进度条使用详解，ProgressBar进度条，分为旋转进 - phpStudy...
Android ProgressBar进度条使用详解 ProgressBar进度条,分为旋转进度条和水平进度条,进度条的样式根据需要自定义,之前一直不明白进度条如何在实际项目中使用,网上演示进度条的案 ...
elementui进度条如何设置_vue.js+ElementUI实现进度条提示密码强度效果
要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示&qu ...
android ProgressBar 自定义进度条颜色
android 自定义进度条颜色先看图基于产品经理各种自定义需求,经过查阅了解,下面是自己对android自定义进度条的学习过程! 这个没法了只能看源码了,还好下载了源码, sources\bas ...
IOS开发基础之绘制饼图、柱状图、自定义进度条
IOS开发基础之绘制饼图.柱状图.自定义进度条源码在我的主页里 1.绘制饼图效果源码 // LJView.m // 34-绘图饼图 // Created by 鲁军 on 2021/2/23. ...
android自定义进度条_Android中的自定义进度栏
android自定义进度条 Custom progress bar in android application gives it a personal touch. In this tutorial ...
Android 各种自定义进度条Progressbar
Android 自定义进度条 Progressbar 控件集合关于我,欢迎关注博客:ccapton(http://blog.csdn.net/ccapton) 微信:Ccapton Github ...
关于安卓自定义进度条（二）
先上gif效果图: 上图中,蓝色的进度条为自定义进度条注意!!!源码在文末背景要实现一个进度条,大部分情况下,都是需要进行自定义的.因为原生就算你自定义了背景图片,但是一旦进度条的高度,超过了一 ...
flutter 自定义进度条progress
系统自带进度条有一定局限性,只能设置背景色,前景色要设置动画的颜色值,且不能自定义是否圆角等属性 // 2表示当前的值,10表示最大值 LinearProgressIndicator(value: ...

elementui自定义进度条形状