首页 > 其他分享 >el-progress进度条颜色渐变

el-progress进度条颜色渐变

时间:2024-11-01 17:18:45浏览次数:3  
标签:el 进度条 custom rgba progress 255

效果图:

代码:

<el-progress
              stroke-width="4"
              type="line"
              :percentage="91.23"
              class="custom-progress"
              color="transparent"
            >
              <template #default="{ percentage }">
                <div class="progress-label">{{ percentage }}%</div>
              </template>
            </el-progress>

样式代码:

.custom-progress {
  position: relative;
  width: 300px; /* 设置进度条的宽度 */
  background: transparent;
}
// 进度条颜色渐变
:deep(.custom-progress .el-progress-bar__inner) {
  background-image: linear-gradient(
    to right,
    rgba(0, 120, 255, 0.1),
    rgba(0, 160, 255, 1)
  );
}

标签:el,进度条,custom,rgba,progress,255
From: https://blog.csdn.net/lingodeer/article/details/143436765

相关文章

  • Linux-shell实例手册-网络操作
    本文章讲解的是在linux下跟网络相关的一些操作和命令,喜欢就点赞收藏哦,方便随时查阅!文章目录1Linux下网络基本命令2netstat3ssh4网卡配置文件5route6解决ssh链接慢7ftp上传8nmap9 流量切分线路10snmp1Linux下网络基本命令   rz  #通过ssh上传......
  • vue自定义组件实现v-model双向数据绑定
    一、Vue2 实现自定义组件双向数据绑定①v-model 实现双向数据绑定 在vue2中,子组件上使用v-model的值默认绑定到子组件的props.value属性上,由于子组件不能改变父组件传来的属性,所以需要通过$emit触发事件使得父组件中数据的变化,然后再同步到子组件。vue2默认触发v-model......
  • 配置elk插件安全访问elk前台页面
    编辑els配置文件vimelasticsearch.yml,添加以下配置文件用elk用户,启动els服务关闭防火墙,查看els启动是否成功,通过是否启动java进程来判断或者通过查看是否启动9200和9300端口来判断是否启动交互模式启动密码配置文件interactive表示交互模式提示输入用户密码,全部输......
  • SHELL 猜随机数
    猜随机数脚本生成一个100以内的随机数,提示用户猜数字,根据用户的输入,提示用户猜对了,猜小了或猜大了,直至用户猜对脚本结束。#!/bin/bash#RANDOM为系统自带的系统变量,值为0-32767的随机数#使用取余算法将随机数变为1-100的随机数num=$[RANDOM%100+1]#使用read提示用户猜数......
  • Delphi7 对比两个文件版本
     functionCompareFileVersion(strVerNew:String;strVerOld:String):boolean;vari:integer;newCount:Integer;oldCount:Integer;slVerNew:TStringList;slVerOld:TStringList;beginResult:=True;slVerNew:=TStringList.Create;slVe......
  • AI大模型高效开发神器来了 ,解读ModelArts 8大能力
    随着国资委、工信部等持续推动工业企业开展人工智能创新应用,以及AI大模型为代表的新一代AI技术在快速发展,赋能各行各业,开展AI的创新应用对领先的工业企业已经是必答题。,在IDC《中国工业AI综合解决方案2024年厂商评估》中,华为在战略、能力、市场份额三个维度取得第一,位于领导者类别......
  • 沨鸾的Shell小技巧
    跟着沨鸾学shell,学到最后只会喵喵喵。正经部分:语法规范:变量要加{}括起来。函数最好加个function关键字。头部一定要有释伴(shebang)。记得写注释,要不然也就上帝能看懂你写的什么了。退出时要有返回状态。能用[[]]就别用[]。尽量用printf代替echo使用以提供更好的兼容性。......
  • UNIVERSITY OFLIVERPOOLDepartment of Electrical Engineering and Electronics
    UNIVERSITYOFLIVERPOOLDepartmentofElectricalEngineeringandElectronicscontactmeonhelp-assignmentcontactmeonhelp-assignmentcontactmeonhelp-assignmentAssignmentOverviewInstantiationandmanipulationofgeometricalobjectsissignificant......
  • POLIR-Mind-Cognition-Neural Models-NLP(Neural Logic Levels) 思维逻辑层级-能给你
    百知思维模型-NLP理解层次能给你无敌洞察力https://v.douyin.com/iS74bMKr/POLIR-Mind-CognitionNeuralModelsNLP(NeuralLogicLevels)思维逻辑层级能给你无敌洞察力GregoryBertson(格雷歌理,贝特森)RobertDiertz(罗伯特,迪尔磁)终于在1991年成为理解问题和解决问题......
  • 2024最新IntelliJ IDEA常用的小技巧汇总,JAVA 新手上路必备
    目录一、IntelliJIDEA概述二、下载与安装2.1下载2.2安装三、快速创建并运行Java工程3.1创建Java工程3.2创建package和class四、详细设置4.1字体大小设置4.2字符编码设置4.3大小写不敏感设置4.4自动导包4.5启动退出设置4.6自动更新五、快速开发5.1代码模板......