需求

1.进度条里面的文字需要根据进度的长度而变化

原理

用两个一模一样的样式的 div 重叠起来

效果

字体开始为 蓝色，跟随进度条变为 白色

在线预览：

https://jsfiddle.net/lmxdawn/...

代码

<!DOCTYPE html>

<html lang="cmn-hans">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <script>!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);</script>

    <title>进度条渐变</title>

    <style type="text/css">

        * {

            box-sizing: border-box;

        }

        .box{

            position: fixed;

            left: 50%;

            transform: translate(-50%);

            width: 320px;

            height: 44px;

            background-color: white;

            color: #00a0e9;

            border: 1px solid #00a0e9;

        }

        .process{

            position: absolute;

            height: 100%;

            width: 0;

            background: #00a0e9;

            color: white;

            overflow: hidden;

            z-index: 10;

        }

        .process-text{

            position: absolute;

            left: 160px;

            top: 50%;

            font-size: 12px;

            transform: translate(-50%, -50%);

            white-space: nowrap;

        }

    </style>

    <script>

        function process() {

            var t = 1;

            var max = 320;

            var progress = document.getElementById("process");

            var process_texts = document.getElementsByClassName("process-text");

            var interval = setInterval(function () {

                if (t == max) {

                    clearInterval(interval);

                    for (var i in process_texts){

                        process_texts[i].innerHTML = '完成'

                    }

                } else {

                    progress.style.width = t + "px";

                    for (var i in process_texts){

                        process_texts[i].innerHTML = '进度' + (t / max * 100).toFixed(2) + "%"

                    }

                    t++;

                }

            }, 10)

        }

    </script>

</head>

<body>

<div class="box" onclick="process()">

    <div class="process" id="process">

        <span class="process-text">点击开始</span>

    </div>

    <span class="process-text">点击开始</span>

</div>

</body>

</html>

css 进度条的文字根据进度渐变的更多相关文章

  1. BackgroundWorker 的输入、输出参数、进度条与文字刷新、取消机制、返回事件

    1. 定义全局变量 BackgroundWorker backgroundwoker; 2. 点击开始按钮或其它时机初始化 backgroundwoker = new BackgroundWorker ...

  2. jquery自定义进度条与h5原生进度条

      介绍一款自定义的进度条 <div class="box-nine"> <div class="progress"> <!--一 ...

  3. Android开发 ---基本UI组件4：拖动事件、评分进度条、圆圈式进度条、进度条控制

    Android开发 ---基本UI组件4 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding=" ...

  4. Java web实时进度条整个系统共用(如java上传进度条、导入excel进度条等)

    先上图: 这上文件上传的: 这是数据实时处理的: 1:先说说什么是进度条:进度条即计算机在处理任务时,实时的,以图片形式显示处理任务的速度,完成度,剩余未完成任务量的大小,和可能需要处理时间,显示方式 ...

  5. ios swift 实现饼状图进度条，swift环形进度条

    ios swift 实现饼状图进度条 // // ProgressControl.swift // L02MyProgressControl // // Created by plter on 7/2 ...

  6. CProgressCtrl进度条控件实现进度滚动效果

    关于CProgressCtrl 控件的基本操作网上有很多资料,可我想实现进度条中进度滚动效果,即很多时候程序出现的等待或启动画面,如下图: 实现这个效果的函数为SetMarquee(_In_ BOOL ...

  7. Android——音乐播放器完善——进度条显示当前播放进度，加可拖动进度条（未待解决完问题）

    效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...

  8. iOS 自定义任意形状加载进度条（水波纹进度条）

    1. 项目中要做类似下面的加载动画: 先给出安卓的实现方式 2.iOS的实现方式参考了下面两位的,感谢. 以任意底部图片为背景的加载动画 和 水波纹动画 最后附上自己的demo

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

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

随机推荐

  1. ZOJ-1610 Count the Colors（线段树染色，求染色段）

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1610 https://vjudge.net/contest/318019# ...

  2. 9.数据分组 group by

    --数据分组 group by --作用:用于 对查询的数据进行分组,并处理 select deptno,job from emp group by deptno,job --1.分组之后,不能将除分 ...

  3. 在windows系统下安装使用msf

    前沿 msf基本是我在kali里最经使用的工具了 因为今天碰到一些关于VmWare的事情没有解决 windows在前一段时间更新,要求我卸载vmware虚拟机,否则就无法更新. 卸载之后再装回来就无法 ...

  4. jsp页面之间传中文参数显示乱码问题的解决

    最近在项目中遇到jsp页面通过url传递参数,出现乱码,但是在本地是正常显示,在服务器上却是乱码,找了好久都没找到解决方法,最终在大神的帮助下解决了这个问题 比如从a.jsp像b.jsp页面传递参数 ...

  5. redis安装zmalloc.h:50:31: 致命错误：jemalloc/jemalloc.h：没有那个文件或目录

    问题: zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录 解决方案:执行命令:make MALLOC=libc make MALLOC=libc

  6. xshell+xftp将项目部署到远程服务器上

    Xshell 简介: Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议. Xshell 通过互联网到远程主机的 ...

  7. gpio 的配置

    1.时钟使能 B引脚RCC时钟脉冲启动.|(或)表示只要第三个为1就行. 也可以写为RCC_APB2ENR  | = 0X0008; 2.配置GPIO的输出模式以及速度 3 . 如果是 0号引脚:GP ...

  8. 奇点云数据中台技术汇(一) | DataSimba——企业级一站式大数据智能服务平台

    在这个“数据即资产”的时代,大数据技术和体量都有了前所未有的进步,若企业能有效使用数据,让数据赚钱,这必将成为企业数字化转型升级的有力武器. 奇点云自研的一站式大数据智能服务平台——DataSimba ...

  9. 吴裕雄--天生自然 JAVASCRIPT开发学习：对象 实例（3）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. js页面--年份自动增加

    ) { document.write("-" + new Date().getFullYear()); }</script> // 大于2017年自动加上 - 年份