CSS3实现炫酷进度条

来源：互联网发布：自由之战末那之冠淘宝编辑：程序博客网时间：2024/05/29 02:19

看了一个进度条很漂亮，所以自己试试看

html

<div class="load-container"><span class="run"></span><div class="meter">0</div></div>

css样式：

* {margin: 0;padding: 0;font-family: 'microsoft yahei';}html,body {width: 100%;height: 100%;background-color: #222;}.load-container {width: 600px;height: 6px;margin: 0 auto;margin-top: 200px;background-image: -webkit-linear-gradient(left,#5bd8ff, #ff0000);border-radius: 5px;position: relative;}.run {position: absolute;    width: 0px;    height: 6px;    right: 0px;    background: #000;    border-radius: 5px;    animation: runnAnimation 10s linear;}@keyframes runnAnimation {0% {width: 600px;}100% {width: 0px;}}.run:after {content: "";display: block;width: 16px;height: 16px;border-radius: 50%;background-color: #f00;margin-left: -4px;margin-top: -4px;animation: destination 10s linear;}@keyframes destination {0% {background-color: #5bd8ff;}100% {background-color: red;}}.meter {float: right;margin-top: 10px;    font-size: 40px;    color: red;    animation: fontColor 10s linear;}@keyframes fontColor {0% {color: #5bd8ff;}100% {color: red;}}.meter:after {content: "%"}

js代码如下：

window.onload = function() {var meter = document.querySelector('.meter');run(meter,100);function run(el,time) {time = time ? time : 100;el = el ? el : document;var i = 0;var timer = setInterval(function() {if(i<100) {i++;el.innerHTML = i;} else {clearInterval(timer);}},time)}}

效果图：

如果想要调整进度时间，需要修改css样式中animation的时间和js中的时间

PS：css未做前缀处理，所有测试都在最新谷歌浏览器下进行

0 0