去年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水平移动，就可以写出一个进度条的效果。

　　

　　附上源代码：

 <!doctype html>

 <head>

 <meta charset="UTF-8">

 <title>process</title>

 <style>

     html {

         font-size: 62.5%;

     }

     .bg_fff {

         background-color: #fff;

     }

     .xui-wrapper {

         margin:0 auto;

         width:100%;

         max-width:750px;

         /*height:100vh;*/

         background-color:#efeff4;

     }

     .xui-myPromption-wrapper .xui-returnCommission .xui-process {

         position: relative;

         display: inline-block;

         vertical-align: middle;

         padding: 28px 0 12px;

         width: 76%;

     }

     .xui-myPromption-wrapper .xui-process .xui-icon-flag {

         position: absolute;

         top: 10px;

         left: 0;

         width: 12px;

         height: 18px;

         background-size: 11px;

     }

     .xui-myPromption-wrapper .xui-process .xui-process-static {

         width: 100%;

         height: 15px;

         border-radius: 10px;

         -webkit-box-shadow: 0 0 5px rgba(0, 198, 255,.6);

         box-shadow: 0 0 5px rgba(0, 198, 255,.6);

         background-color: rgba(0, 198, 255,.6);

     }

     .xui-myPromption-wrapper .xui-process .xui-process-active {

         position: absolute;

         top: 28px;

         left: 0;

         width: 0;

         height: 14px;

         border: 1px solid #4dafe2;

         border-radius: 10px;

         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);

         background-color: #008cd5;

         background-size: 20px 38px;

         -box-shadow: box-shadow: 1px 1px 5px rgba(0, 140, 213, .8);

         box-shadow: 1px 1px 5px rgba(0, 140, 213, .8);

         -webkit-animation: process 800ms infinite linear;

         animation: process 800ms infinite linear;

     }

     .xui-myPromption-wrapper .xui-process .xui-process-active:after {

         content: '';

         position: absolute;

         top: 0;

         left: 0;

         right: 0;

         bottom: 0;

         height: 100%;

         border-radius: 10px;

         background-image: linear-gradient(to bottom,rgba(0, 140, 213, .6), rgba(0, 140, 213, .6) 15%, transparent 60%, rgba(0, 140, 213, .6));

     } 

     /* 动画 */

     @-webkit-keyframes process {

         0% { background-position: 0 0; }

         100% { background-position: 20px 0; }

     }

     @keyframes process {

         0% { background-position: 0 0; }

         100% { background-position: 20px 0; }

     }

 </style>

 </head>

 <body>

 <div class="xui-wrapper xui-myPromption-wrapper">

     <div class="xui-mainContain pt10 bg_fff">

         <div class="xui-returnCommission">

             <div class="xui-process">

                 <i id="icon-flag" class="xui-icon-flag"></i>

                 <div class="xui-process-static"></div>

                 <div id="process-bar" class="xui-process-active"></div>

             </div>

         </div>

     </div>

 </div>

 <script>

 (function (hasGet, totalGet) {

     var flag = document.getElementById('icon-flag'),

         processBar = document.getElementById('process-bar'),

         widthPercentage = Math.round(hasGet/totalGet*100);

     if (widthPercentage >= 100) {

         widthPercentage = 100;

     }

     flag.style.left = (widthPercentage-1) + '%';

     processBar.style.width = widthPercentage + '%';

     if (widthPercentage == 0) {

         processBar.style.borderStyle = 'none';

     }

 })(10, 20);

 </script>

 </body>

 </html>

纯css实现进度条效果的更多相关文章

  1. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  2. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  3. 纯CSS打造进度条

    进度条效果如下: CSS部分 body { background-color: white; } .progress-bar { display: flex; flex-direction: row; ...

  4. CSS 静态进度条效果

    今天学习到了实现一个静态进度条的方法,固写一篇笔记稳固一下自己的知识. 最终的效果如下,进度条放在一个框里,水平宽自适应. 现在就开始,首先写一个进度条先. .progress-bar{ /* 进度条 ...

  5. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

  6. CSS实现进度条和订单进度条

    最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...

  7. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  8. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  9. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

随机推荐

  1. 关于android屏幕适配的问题（drawable-xxxxxxxx，dp，sp，px等等），偶尔看到了android源代码，关于dpi的区分的值

    上一篇博客说了一下.9.png图片http://blog.csdn.net/qq_23195583/article/details/46737419 当然,点九的是指的能够进行拉伸的.那么假设图片不能 ...

  2. MSSQL-SQL SERVER 2008安装教程

    运行setup.exe     选择“安装”菜单,点击“全新安装或向现有安装添加功能. 环境检测通过,点击“确定”: 不用修改产品密钥,点击“下一步”: 点击“下一步”: 根据您的实际情况选择响应的组 ...

  3. 苹果越狱后必备软件，总有你需要的！11月23日追加14个，支持【iOS4】

    http://bbs.dospy.com/thread-7398730-1-301-2.html越狱后必备软件,总有你需要的!11月23日追加14个,支持[iOS4]   背景自定义插件

  4. XP和Win 7双系统安装说明和注意事项

    安装前说明: 1.先装XP,再装Windows 7,最好不要反过来,不然XP不会把Windows 7的启动管理器给覆盖掉,会麻烦些.总之遵循“旧版本到新版本”安装原则. 2.如果分区不够大,请用以下软 ...

  5. [转]Splay Tree

    转自:http://blog.sina.com.cn/s/blog_7c4c33190100sg9r.html Splay Tree(又叫伸展树)本质上也是一棵二叉查找树.它不是严格平衡的,但通过一种 ...

  6. wait/waitpid函数与僵尸进程、fork 2 times

    一.僵尸进程 当子进程退出的时候,内核会向父进程发送SIGCHLD信号,子进程的退出是个异步事件(子进程可以在父进程运行的任何时刻终止) 子进程退出时,内核将子进程置为僵尸状态,这个进程称为僵尸进程, ...

  7. Linux内核同步 - memory barrier

    一.前言 我记得以前上学的时候大家经常说的一个词汇叫做所见即所得,有些编程工具是所见即所得的,给程序员带来极大的方便.对于一个c程序员,我们的编写的代码能所见即所得吗?我们看到的c程序的逻辑是否就是最 ...

  8. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第13章节--使用业务连接服务创建业务线解决方式 SP Apps中的BCS

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第13章节--使用业务连接服务创建业务线解决方式  SP Apps中的BCS         之前的联系中,你安装了一个业 ...

  9. 在Debug模式下中断, 在Release模式下跳出当前函数的断言

    在Debug模式下中断, 在Release模式下跳出当前函数的断言 #ifdef DEBUG #define __breakPoint_on_debug asm("int3") # ...

  10. introduction to anaconda

    一.安装好anaconda后进行更新 说明:在windows环境中的操作,在linux环境中请参考具体书籍. 1.进入cmd命令行 执行 conda update conda conda update ...