表示进度的css代码,css 进度条的文字根据进度渐变的示例代码

本文介绍了css 进度条的文字根据进度渐变的示例代码,分享给大家,具体如下:

需求

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

原理

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

效果

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

代码

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

进度条渐变

* {

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;

}

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)

}

点击开始

点击开始

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。 ad51e517755f8fd6a7ec83ced4ecfaf3.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值