CSS+JS打造带渐变的进度条

最新推荐文章于 2023-11-06 11:06:28 发布

原创最新推荐文章于 2023-11-06 11:06:28 发布 · 691 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #filter #function #div

CSS 同时被 2 个专栏收录

39 篇文章

订阅专栏

JavaScript

35 篇文章

订阅专栏

本文介绍了一种使用CSS和JavaScript结合的方法来创建一个带有渐变效果的进度条。通过HTML定义基本结构，利用CSS设置样式并添加渐变效果，再配合JavaScript动态更新进度百分比，实现了流畅的动画过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>CSS+JS打造带渐变的进度条</title>
<style>
#load{width:500px;height:25px;border:1px #000 solid;}
#loading{position:absolute;z-index:2;height:23;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=#39867b);}
#loadtext{position:absolute;z-index:3;width:100%;height:100%;line-height:23px;text-align:center;}
</style>
</head>
<body>
<div id="load"><div id="loading"></div><div id="loadtext">1%</div></div>
<script>
var i=0;
function test(){
i++;
document.getElementById("loading").style.width = i + "%";
document.getElementById("loadtext").innerText = i + "%";
if(i<100)setTimeout("test()",200);
}
setTimeout("test()",200);
</script>
</body>
</html>