css 渐变色进度条

效果：

代码：

<!-- 进度条 -->
<view class="progress-box"><view class="progress" :style="{width: pogressWitdh + '%'}"></view>
</view>

created() {// 只是模拟进度setInterval(() => {if (this.pogressWitdh < 100 ) {this.pogressWitdh = this.pogressWitdh + 10 } else {this.pogressWitdh = 100}}, 1000)
},

progress-box {margin-left: 20rpx;margin-right: 20rpx;width: 546rpx;height: 30rpx;border-radius: 15rpx;background: #eadedd;box-shadow: 0px 0rpx 2rpx 4rpx #eadedd;
}.progress {// 没有变量width之前的占位width: 30rpx;height: 30rpx;background: linear-gradient(to right, #FB3448, #E04AAA, #C8EEFF);border-radius: 15rpx;transition: all 0.4s ease;
}

css 渐变色进度条相关推荐

Java渐变进度条_Android ProgressBar自定义图片进度，自定义渐变色进度条
java.lang.Object ↳android.view.View ↳android.widget.ProgressBar 直接子类 AbsSeekBar 间接子类 RatingBar, Seek ...
div css实现进度条
div css实现进度条进度条前端开发中经常用到今天来看下简单的HTML和css实现的进度条. 我们先看下代码: <div class="progress"> < ...
CSS 斜条纹进度条动画
这是第一版进度条 ,用css写的.但是后续因为数据不同,要显示不同的颜色和数据,所以又改了一版,直接用的el-progress.自定义的样式.对于新手小白来说比较友好.先上这一版代码. <div ...
CSS实现进度条和订单进度条
由于近期需要做一个订单进度条,比较直观的反应当前订单的状态,css样式借鉴了网上的相关代码,下面是效果图,以及实现说明一.说明 1.首先页面需要引入jQuery的相关js,一般页面都已经引入了就不多 ...
css圆环进度条的几种方法
方法一: 用H5自带的canvas画圆环 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
Vue实现渐变色进度条
今天在封装一个个类似于下面这样的进度条组件功能要求进度条的总格子数可以自定义当前件数的占比和当前蓝色格子数对应格子的蓝色渐变要符合UI设计这个渐变色的处理浪费了好一会功夫,下面看一下我的实现 ...
【vue自定义组件】渐变色进度条组件
前言佛祖保佑, 永无bug.Hello 大家好!我是海的对岸! 当时UI给的原型图说要弄这个,看了一下,不难,那就弄下,现在把这个记录下来. 实现过程先看效果实现原理总体思路就是这个组件根据传 ...
jquery css 流程进度条
方案1: 方案2: <!DOCTYPE html> <html><head> <meta charset="utf-8"> < ...
css环形进度条clip,使用CSS clip 属性实现音频播放圆环进度条
这是效果突然有需求要做一个圆环的音频播放进度条(上图效果),自己琢磨尝试了半天,也没有实现.最后度娘一下,才知道css还有一个clip属性,完美实现需求.分享一下,说不定能帮其它小伙伴.至于有没有用 ...

css 渐变色进度条

css 渐变色进度条相关推荐

最新文章

热门文章