CSS에서 실행되어 진행률 표시줄을 그라데이션 색상으로 아름답게 만드는 웹페이지 진행률 표시줄입니다. Tongjin은 CSS를 제어하여 진행률 표시줄의 배경을 적시에 타일링합니다. 진행률 표시줄을 계속해서 웹페이지에 적용해야 합니다.
<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>CSS+JS를 사용하여 그라데이션이 있는 진행률 표시줄 생성과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
