一个网页进度条,运行于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>
更多CSS+JS打造带渐变的进度条相关文章请关注PHP中文网!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

WebStorm Mac version
Useful JavaScript development tools

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

Dreamweaver CS6
Visual web development tools

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
