正文

纯css实现进度条效果

悠悠洛  2022-02-08  498

关键词：

　　去年7月份做一个公司商城的微信页面（微信用的chrome内核）需要写一个提示返现进度的进度条效果。

　　一个完整的进度条效果其实可以拆分一下：

　　　　一段背景；

　　　　一小段的静态的斜纹进度条；

　　　　斜纹进度条用线性渐变 linear-gradient 类实现，原理很好理解，2个参数：

　　　　　　1、角度；

　　　　　　2、关键点（包含2个参数，1是颜色，2是长度位置）

display: inline-block;
width: 100px;
height: 100px;
background-image: linear-gradient(0, #f10 0px, #ddd 50px);

　　　　这是最基础的渐变，构造了一个100px*100px的正方形，渐变角度为0（从下到上），关键点A颜色#f10，开始长度为0px，关键B颜色#ddd，开始长度为50px，长度为点A到点B的长度差（50px）的这一段就是渐变区域，点B到末尾就是纯点B的颜色#ddd的区域，即上图的渐变其实有个隐藏的关键点C颜色#ddd，开始长度为100px，上图的线性渐变完整的写法是：

background-image: linear-gradient(0, #f10 0px, #ddd 50px, #ddd 100px);

　　　　例如我写的这个静态的斜纹进度条的样式是：

linear-gradient(60deg, transparent 0, transparent 0.8rem, #4dafe2 0.8rem, #4dafe2 1.6rem, transparent 1.6rem, transparent 2.4rem, #4dafe2 2.4rem);

　　　　渐变角度为60度；

　　　　0~0.8rem是第一段渐变区域，由于2个关键点的颜色相同（transparent是透明的，即颜色由背景决定），所以这一段渐变区域在忽略渐变角度的情况下其实是纯色的的长度为0.8rem的长方形；

　　　　0.8rem~0.8rem是第二段渐变区域，由于2个关键点的长度位置相同，所以即便2个关键点的颜色不同，但是这一段渐变区域的长度为 2个关键点的长度位置的差值即0，等于没有任何渐变效果；

　　　　0.8rem~1.6rem……同理。

　　　　那么就构造出了这么一段静态的进度条，我们只需要一个无限循环的动画不断控制background-position水平移动，就可以写出一个进度条的效果。

　　附上源代码：

  1 <!doctype html>
  2 <head>
  3 <meta charset="UTF-8">
  4 <title>process</title>
  5 <style>
  6     html {
  7         font-size: 62.5%;
  8     }
  9     .bg_fff {
 10         background-color: #fff;
 11     }
 12     .xui-wrapper {
 13         margin:0 auto;
 14         width:100%;
 15         max-width:750px;
 16         /*height:100vh;*/
 17         background-color:#efeff4;
 18     }
 19     .xui-myPromption-wrapper .xui-returnCommission .xui-process {
 20         position: relative;
 21         display: inline-block;
 22         vertical-align: middle;
 23         padding: 28px 0 12px;
 24         width: 76%;
 25     }
 26     .xui-myPromption-wrapper .xui-process .xui-icon-flag {
 27         position: absolute;
 28         top: 10px;
 29         left: 0;
 30         width: 12px;
 31         height: 18px;
 32         background-size: 11px;
 33     }
 34     .xui-myPromption-wrapper .xui-process .xui-process-static {
 35         width: 100%;
 36         height: 15px;
 37         border-radius: 10px;
 38         -webkit-box-shadow: 0 0 5px rgba(0, 198, 255,.6);
 39         box-shadow: 0 0 5px rgba(0, 198, 255,.6);
 40         background-color: rgba(0, 198, 255,.6);
 41     }
 42     .xui-myPromption-wrapper .xui-process .xui-process-active {
 43         position: absolute;
 44         top: 28px;
 45         left: 0;
 46         width: 0;
 47         height: 14px;
 48         border: 1px solid #4dafe2;
 49         border-radius: 10px;
 50         background-image: linear-gradient(60deg, transparent 0rem, transparent 0.8rem, #4dafe2 0.8rem, #4dafe2 1.6rem, transparent 1.6rem, transparent 2.4rem, #4dafe2 2.4rem);
 51         background-color: #008cd5;
 52         background-size: 20px 38px;
 53         -box-shadow: box-shadow: 1px 1px 5px rgba(0, 140, 213, .8);
 54         box-shadow: 1px 1px 5px rgba(0, 140, 213, .8);
 55         -webkit-animation: process 800ms infinite linear;
 56         animation: process 800ms infinite linear;
 57     }
 58     .xui-myPromption-wrapper .xui-process .xui-process-active:after {
 59         content: '';
 60         position: absolute;
 61         top: 0;
 62         left: 0;
 63         right: 0;
 64         bottom: 0;
 65         height: 100%;
 66         border-radius: 10px;
 67         background-image: linear-gradient(to bottom,rgba(0, 140, 213, .6), rgba(0, 140, 213, .6) 15%, transparent 60%, rgba(0, 140, 213, .6));
 68     } 
 69 
 70     /* 动画 */
 71     @-webkit-keyframes process {
 72         0% { background-position: 0 0; }
 73         100% { background-position: 20px 0; }
 74     }
 75     @keyframes process {
 76         0% { background-position: 0 0; }
 77         100% { background-position: 20px 0; }
 78     }
 79 </style>
 80 </head>
 81 <body>
 82 <div class="xui-wrapper xui-myPromption-wrapper">
 83     <div class="xui-mainContain pt10 bg_fff">
 84         <div class="xui-returnCommission">
 85             <div class="xui-process">
 86                 <i id="icon-flag" class="xui-icon-flag"></i>
 87                 <div class="xui-process-static"></div>
 88                 <div id="process-bar" class="xui-process-active"></div>
 89             </div>
 90         </div>
 91     </div>
 92 </div>
 93 <script>
 94 (function (hasGet, totalGet) {
 95     var flag = document.getElementById('icon-flag'),
 96         processBar = document.getElementById('process-bar'),
 97         widthPercentage = Math.round(hasGet/totalGet*100);
 98     if (widthPercentage >= 100) {
 99         widthPercentage = 100;
100     }
101     flag.style.left = (widthPercentage-1) + '%';
102     processBar.style.width = widthPercentage + '%';
103     if (widthPercentage == 0) {
104         processBar.style.borderStyle = 'none';
105     }
106 })(10, 20);
107 </script>
108 </body>
109 </html>

纯css实现顶部进度条随滚动条滚动

一、效果图二、直接复制粘贴<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatibl 查看详情

纯css使用线性渐变实现滚动进度条

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情

css静态进度条效果

今天学习到了实现一个静态进度条的方法，固写一篇笔记稳固一下自己的知识。最终的效果如下，进度条放在一个框里，水平宽自适应。现在就开始，首先写一个进度条先。.progress-bar{/*进度条的槽*/width:47%;/*设置进度条的高度*/h... 查看详情

js实现进度条效果

源代码：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <styletype="text/css"> *{ margin:0pxauto; } #wk{ width:800px; h 查看详情

纯css3实现文字间歇滚动效果

...数据来展示所有的数据。效果如图：用JavaScript也很容易实现，但是需要操作DOM，可以参考这篇博客。考虑到项目中经常使用Vue，已经很少操作DOM了，所以考虑最好通过CSS来实现，可以通过Vue给模板元素动态绑定class来实现相同的... 查看详情

学习|css3实现进度条加载

...种交互效果，这样做的目的是提高用户体验。进度条的的实现分为3大部分：1、页面布局，2、进度条动效，3、何时进度条增加。文件目录加载文件顺序<linkrel="stylesheet/less"href="./index.less"><scriptsrc="./zepto.min.js"></script>... 查看详情

css实现炫酷进度条

实现效果：代码内容：<divclassName=styles.progressBox><divclassName=styles.progress></div><divclassName=styles.progress_barstyle=width:"40%" 查看详情

纯前端js实现的加载进度条

functionpreventRepeatedSubmit()varwidth=document.body.scrollWidth;varheight=document.body.scrollHeight;vardivBg=document.getElementById("divBg");varprogressBar=document.getElem 查看详情

两种css3圆环进度条详解

...容易理解，只需要一层一层的嵌套，即可得到效果，但是实现起来较为繁琐，HTML的结构也比较冗余。先看HTML结构：<divclas 查看详情

纯css3制作圆形进度条所遇到的问题

　　近日在开发的页面中，需要制作一个动态的圆形进度条，首先想到的是利用两个矩形，宽等于直径的一半，高等于直径，两个矩形利用浮动贴在一起，设置overflow：hidden属性，作为盒子，内部有一个与其宽高相等的子盒子，... 查看详情

css奇技淫巧box-shadow实现圆环进度条(代码片段)

CSS奇技淫巧Box-shadow实现圆环进度条文章目录CSS奇技淫巧Box-shadow实现圆环进度条一、Box-shadow圆环进度条二、效果预览三、原理刨析四、实际应用五、总结六、参考资料💘七、推荐博文🍗一、Box-shadow圆环进度条实现圆环... 查看详情

进度条控件cprogressctrl实现进度滚动效果

关于CProgressCtrl控件的基本操作网上有很多资料，可我想实现进度条中进度滚动效果，即很多时候程序出现的等待或启动画面，如下图：实现这个效果的函数为SetMarquee(_In_BOOLfMarqueeMode,_In_intnInterval)，第一个参数为开关，第二... 查看详情

纯css实现波浪效果！

一直以来，使用纯CSS实现波浪效果都是十分困难的。因为实现波浪的曲线需要借助贝塞尔曲线。而使用纯CSS的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的... 查看详情

如何用纯css3制作进度条

参考技术A条纹进度条若要制作条纹进度条我应该.bar-fill重新命名.bar-fill-stripes我使用backgrou-image属性linear-gradient同声明颜色剩余CSS3画效述相同看面代码：.bar-fill-stripesheight:15px;display:block;background:#e74c3c;width:0;border-radius:8px;background-... 查看详情

shell脚本实现转圈、进度条等效果

参考技术A开始shell光标闪烁通过符号#填充[]完成进度每个阶段有不同颜色区分进度按照百分比显示进度printf%3d为显示百分比预留了3位，循环条件i每次递增5主要是为了减少进度条显示的长度。i每次递增5，取模之后的index值还是... 查看详情

自定义view实现钟摆效果进度条pendulumview

...ei/article/details/52556755在网上看到了一个IOS组件PendulumView，实现了钟摆的动画效果。由于原生的进度条确实是不好看，所以想可以自定义View实现这样的效果，以后也可以用于加载页面的进度条。废话不多说，先上效果图底部黑边... 查看详情

css奇技淫巧box-shadow实现圆环进度条(代码片段)

如何用纯css3制作进度条

1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。 2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill和.bar-fill的span标签。<div class="container... 查看详情