Element-ui的环形进度条实现颜色渐变效果

UI效果图

其实想实现环形渐变有很多种办法，比如我同事是用echarts，可是我真的很讨厌设置echarts的option要很多代码，我想用element的progress去实现，这样代码是最简洁的。

用了之后是这样原始的效果，是不是真的要丑哭了，这个问题困扰了我两三天，我把其他vue页面做完之后，再回过头来解决这个历史遗留问题，今天来上班的时候就已经做好最坏的打算了，大不了就写5个option，然后就各种百度，一点一点试错

当效果出来之后，我自己都忍不住发朋友圈

主要参考例子element 环形进度条设置颜色渐变

1、但是我看了之后还是不知道怎么做，只是比葫芦画瓢，写了svg的定义

         <svg width="100%" height="100%"><defs><linearGradient id="blue" x1="0%" y1="0%"x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,189,25)" stop-opacity="1"></stop><stop offset="100%" style="stop-color:rgb(0,200,255)" stop-opacity="1"></stop></linearGradient></defs></svg>

这个svg，确实是如参考例子上写的那样，在页面上无关其他的地方就可以

2、用css设置svg

.my_progress /deep/ svg>path:nth-child(2) {stroke: url(#blue);}

页面结构

数据设置

这样看来是不是真的简单方便很多。

拓展：

环形渐变效果是出来了，现在还需要修改一下白底色

.my_progress /deep/ .el-progress-circle__track {stroke: rgba(0,122,255,0.3);}

以及百分比数字的样式

.my_progress /deep/ .el-progress__text {font-size: 36px !important;;font-weight: bolder;color: #FFFFFF;}

值得注意的上边代码用了 !important

主要原因在于F12发现元素自带style，所以要用 !important 提升一下优先级

最后呈现出的效果：

唯一不太完美的是，%和percent字号一样大，我本来想用format设置一下样式，但是没有用，因为它把html直接呈现出了字符串，这个小问题，不知道将来的某一天是否可以解决，也希望过来人能指点迷津。

Element-ui的环形进度条实现颜色渐变效果相关推荐

Swift - 环形进度条（UIActivityIndicatorView）的用法
Swift中,除了条形进度条外,还有环形进度条,效果图如下: 1,环形进度条的基本属性 (1)Style: Large White:比较大的白色环形进度条 White:白色环形进度条 Gray:灰色环 ...
android canvas_Android 自定义View篇（七）实现环形进度条效果
前言 Android 自定义 View 是高级进阶不可或缺的内容,日常工作中,经常会遇到产品.UI 设计出花里胡哨的界面.当系统自带的控件不能满足开发需求时,就只能自己动手撸一个效果. 本文就带自定义 ...
Android花样loading进度条（四）-渐变色环形进度条
背景 Android花样loading进度条系列文章主要讲解如何自定义所需的进度条,包括水平.圆形.环形.圆弧形.不规则形状等. 本篇我们对配文字环形进度条稍加变换,将圆环颜色改为渐变色的形式,使得进 ...
Android花样loading进度条（二）-简单环形进度条
背景 Android花样loading进度条系列文章主要讲解如何自定义所需的进度条,包括水平.圆形.环形.圆弧形.不规则形状等. 本篇我们从圆形进度条讲起,讲简单形式的环形进度条,只有进度色彩,没有进 ...
iOS通过CAShapeLayer和UIBezierPath画环形进度条
UIBezierPath可以绘制矢量路径,而CAShapeLayer是Layer的子类,可以在屏幕进行绘制,本文主要思想是:CAShapeLayer按照UIBezierPath的矢量路径进行绘制. 效 ...
canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"><p>抱歉, ...
[Swift通天遁地]一、超级工具-(2)制作美观大方的环形进度条
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
iOS 自定义控件 progressView(环形进度条)
转帖:http://blog.csdn.net/xiangzhang321/article/details/42688133 之前做项目的时候有用到环形进度条,先是在网上找了一下第三方控件,发现好用是 ...
jQuery Easy UI ProgressBar（进度条）组件
ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

Element-ui的环形进度条实现颜色渐变效果

Element-ui的环形进度条实现颜色渐变效果相关推荐

最新文章

热门文章