當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

飞机进度条

發(fā)布時間：2024/3/26 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了飞机进度条小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

css部分 *{padding:0; margin:0;}
.container{ margin: 0 auto; width: 60%; padding:20px; }
.progress{ margin-top: 50px; padding: 10px; background: grey; border-radius: 5px; height: 20px; } .progress::after{ content:""; display: block; margin-top: 9px; width: 100%; border-top: dashed 3px white; } .progress .progress-bar { float: left; height: 100%; position: relative; } .progress .progress-bar span{ display: block; width: 40px; height: 30px; background: #333; position: absolute; right: -40px; top: -50px; color: white; text-align:center; line-height: 30px; border-radius: 3px; } .progress .progress-bar span::before{ position: absolute; font-family: fontawesome; content: "\f0d7"; font-size: 24px; color: #333; top: 18px; right: 13px; } .progress .progress-bar span::after{ position: absolute; font-family: fontawesome; content: "\f072"; font-size: 48px; color: #333; transform: rotateZ(45deg); top: 47px; right: 5px; } html部分和js部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap飛機跑道進(jìn)度條動畫特效 - 站長素材</title> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="container"> <div class="progress"> <div class="progress-bar" style="width: 55%; background:#005394;"> <span>55%</span> </div> </div>
<div class="progress"> <div class="progress-bar" style="width: 100%; background:#d9534f;"> <span>100%</span> </div> </div>
<div class="progress"> <div class="progress-bar" style="width: 40%; background:#f0ad4e;"> <span>40%</span> </div> </div> </div>
</body> </html> <script> var ps = document.getElementsByClassName("progress-bar"); for( let i = 0 ; i < ps.length ; i++ ){ let timer = setInterval( ()=>{ if( parseInt( ps[i].style.width ) == 100 ){ clearInterval( timer ); }else{ ps[i].style.width = parseInt( ps[i].style.width ) +1 + "%"; ps[i].children[0].innerHTML = ps[i].style.width; } },60 ) } </script>

轉(zhuǎn)載于:https://www.cnblogs.com/tis100204/p/10328871.html

總結(jié)

以上是生活随笔為你收集整理的飞机进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。