CSS + JS でグラデーションのあるプログレスバーを作成する
- 高洛峰オリジナル
- 2016-12-16 16:50:221454ブラウズ
CSS 上で実行され、進行状況バーをグラデーション色に美しくする Web ページの進行状況バー。Tongjin は、進行状況バーの背景をタイムリーに並べて表示するために JavaScript を使用します。このデモ プログラムは、進行状況バーのスタイルを示すだけです。 、Web ページに適用する場合は変更する必要があります。
<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 中国語 Web サイトに注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。