<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移動端進度條</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
html {
font-size: 20px;
}
body {
font-size: 16px;
font-family: "微軟雅黑";
}
@media only screen and (max-width: 320px) { html {
font-size: 42.7px !important;
}}
@media only screen and (min-width: 321px) and (max-width: 360px) { html {
font-size: 48px !important;
}}
@media only screen and (min-width: 361px) and (max-width: 375px) { html {
font-size: 50px !important;
}}
@media only screen and (min-width: 376px) and (max-width: 384px) { html {
font-size: 52.1px !important;
}}
@media only screen and (min-width: 385px) and (max-width: 414px) { html {
font-size: 55.2px !important;
}}
@media only screen and (min-width: 415px) and (max-width: 480px) { html {
font-size: 64px !important;
}}
@media only screen and (min-width: 481px) and (max-width: 540px) { html {
font-size: 72px !important;
}}
@media only screen and (min-width: 750px) { html {
font-size: 100px !important;
}}
.loading_fater{
width: 4.14rem;
height: 0.44rem;
line-height: 0.44rem;
background: #391956;
border: 3px solid #FFFFFF;
box-shadow: 0 3px 7px 0 rgba(189,16,224,0.50);
border-radius: 100px;
position: relative;
margin: 50% auto 0;
}
.loading{
width: 0.02rem;
height: 0.44rem;
background: #FE6365;
box-shadow: inset 0 0 4px 0 #470707;
border-radius: 100px;
}
.loading_fater> span{
color: white;
position: absolute;
top: 0;
left: 2rem;
}
</style>
</head>
<body>
<div class="loading_fater">
<div class="loading"></div>
<span><label class="bfb">0</label>%</span>
</div>
<script type="text/javascript">
/**
* 由于js并不能獲取下載所需資源包文件大小
* 所以只能在頁面各個部位插入代碼片段, 更新進度條, 以模擬資源下載(讀绕崦丁)進度
*/
updateLoading(10,1);
//用延遲 模擬加載文件需要的時間
setTimeout(function(){
updateLoading(60,1);
},1000)
setTimeout(function(){
updateLoading(100,1);
},3000)
var bfb = document.getElementsByClassName('bfb')[0];
/**
* 更新進度條
* @param {Object} bfb_num :更新進度條數字baifenbi (10)
* @param {Object} millisecond :動畫執(zhí)行毫秒數
*/
function updateLoading(bfb_num,millisecond){
document.getElementsByClassName('loading')[0].style.cssText = 'width: '+bfb_num+'%;transition-duration:'+millisecond+'s;'
var load_Interval = setInterval(function(){
if(bfb.innerHTML < bfb_num){
bfb.innerHTML = parseInt(bfb.innerHTML)+1;
}else{
clearInterval(load_Interval);
}
},millisecond*1000/bfb_num)
}
</script>
</body>
</html>
H5移動端 進度條加載
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
- 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來陶缺,“玉大人钾挟,你說我怎么就攤上這事”グ叮” “怎么了掺出?”我有些...
- 正文 為了忘掉前任泥畅,我火速辦了婚禮,結果婚禮上琅翻,老公的妹妹穿的比我還像新娘位仁。我一直安慰自己柑贞,他們只是感情好,可當我...
- 文/花漫 我一把揭開白布聂抢。 她就那樣靜靜地躺著钧嘶,像睡著了一般。 火紅的嫁衣襯著肌膚如雪琳疏。 梳的紋絲不亂的頭發(fā)上有决,一...
- 文/蒼蘭香墨 我猛地睜開眼篱瞎,長吁一口氣:“原來是場噩夢啊……” “哼苟呐!你這毒婦竟也來了?” 一聲冷哼從身側響起俐筋,我...
- 正文 年R本政府宣布测蘑,位于F島的核電站灌危,受9級特大地震影響,放射性物質發(fā)生泄漏碳胳。R本人自食惡果不足惜勇蝙,卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望挨约。 院中可真熱鬧味混,春花似錦产雹、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至馆衔,卻和暖如春瘟判,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背角溃。 一陣腳步聲響...
推薦閱讀更多精彩內容
- 前言 H5加載慢,想要在移動端顯示加載進度树埠?答案就是這么簡單糠馆!歡迎加入學習小組QQ群: 193765960。 版權...
- 前言在之前的文章中怎憋,我曾經給出了一種控制進度條顯示和消失時機的方式又碌。經過實際的測試發(fā)現,很多情況下然并卵绊袋。于是乎又...
- 近期的項目是使用react+antd-mobile的h5移動網頁端的一個程序毕匀,其中一個功能是一個展示列表,具有下拉...
- 轉載:H5緩存機制淺析-移動端Web加載性能優(yōu)化【干貨】 作者:賀輝超癌别,騰訊游戲平臺與社區(qū)產品部 高級工程師 目錄...
- 使用到的第三方庫:NJKWebViewProgress 使用:采用代理方式皂岔,在代理中獲取進度,并賦值給進度條展姐。具體...