CSS+JS creates a progress bar with gradient-PHP开发-php.cn

Home

php教程

PHP开发

CSS+JS creates a progress bar with gradient

高洛峰

Dec 16, 2016 pm 04:50 PM

一个网页进度条，运行于CSS将进度条美化为渐变色，同进使用JavaScript控制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>

Copy after login

更多CSS+JS打造带渐变的进度条相关文章请关注PHP中文网！

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn