使用css渐变色。实现动态进度条效果

基本上现在的ui框架都有自己的进度条组件封装但是有的时候我们需要自己定制的时候还是比较麻烦

比如下面的这个效果

双色进度条贴合效果。可能有点业务会用到吧

就是使用渐变色和动画的效果实现, 第二个进度条动画延迟一点就可以和第一个贴在一起了

animation-delay: .1s; 这个可能童鞋用的比较少
// 还有就是渐变色的描述
background-image: linear-gradient(45deg, #FF4B00 25%, transparent 25%, transparent 50%, #FF4B00 50%, #FF4B00 75%, transparent 75%);

.process {width: 100%;height: 20px;background-color: #000D23;border-radius: 10px;overflow: hidden;display: flex;}.child, .child2 {width: 60%;height: 100%;background-image: linear-gradient(45deg, #FF4B00 25%, transparent 25%, transparent 50%, #FF4B00 50%, #FF4B00 75%, transparent 75%);background-size: 20px 20px;animation: process .6s infinite linear;}.child2 {width: 30%;background-image: linear-gradient(45deg, #FFCE00 25%, transparent 25%, transparent 50%, #FFCE00 50%, #FFCE00 75%, transparent 75%);animation: process .6s infinite linear;animation-delay: .1s;}@keyframes process {from {background-position: 20px 0}to {background-position: 0 0}}

<div class="process"><div class="child"></div><div class="child2"></div></div>

是不是就实现了呢。关注我。持续更新前端知识我的目标是写够1024篇就加油奥利给

使用css渐变色。实现动态进度条效果相关推荐

php js 进度条,JavaScript实现简单动态进度条效果
这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 ...
HTML + CSS 实现矩形/圆形进度条效果 - SVG
本文记录通过 HTML + CSS + 部分原生 JS 使用 SVG 嵌入 HTML 文档的用法实现常见的圆形和矩形进度条效果,效果图如下:(实际运行效果是进度条从 0 过渡到一个目标值比如 100% ...
bootstrap 滚动进度条_bootstrap实现动态进度条效果
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单保存中:{{length}}% PS: ...
如何用CSS做倒计时/圆形进度条效果
前言:有时,我们会见一些圆形的进度条,随着进度条的推进,进行倒计时的变化. 若是只实现一个圆环的话,只用border和border-radius就能画出来. 但是这样的圆环不能动,产生进度条效果的重要 ...
在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果
css怎么实现圆形渐变进度条效果发布时间:2021-03-17 10:29:57 来源:亿速云阅读:129 作者:小新这篇文章给大家分享的是有关css怎么实现圆形渐变进度条效果的内容.小编觉得挺 ...
element-ui实现下载动态进度条，可实现批量下载，附Blob文件类型对照表
element-ui实现下载动态进度条,可实现批量下载,附Blob文件类型对照表 ①页面结构使用element-ui的进度条组件,示例为圆形,具体样式根据需求确定 <el-button>下 ...
html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画
jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件.该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非 ...
python动态显示进度条_实例详解python如何轻松实现动态进度条
本次的这篇文章主要是和大家分享了关于实例详解python如何轻松实现动态进度条,有需要的小伙伴可以看一下思路及讲解假设有一个1000000数据的列表(为了让进度条可以显示出来,很大的数据),我们每 ...
动态的给python添加进度条_python动态进度条的实现代码
python动态进度条的实现代码,具体内容如下所示: 有时候我们需要使用print打印工作进度,正常使用print函数会导致刷屏的现象,举个最简单的例子,从1打印到10,每次停顿0.1秒这样看起来很 ...

使用css渐变色。实现动态进度条效果

使用css渐变色。实现动态进度条效果相关推荐

最新文章

热门文章