現在很多網站會用到進入網站特效,到網頁沒有載入完成的時候,會有一個loding特效,載入完了之後才能看到頁面,今天就帶著做一個js進度條效果,今天要做的效果是純js進度條載入,沒有用到框架,方便大家進行深入理解: 首先我們要進行js進度條的佈局 js進度條佈局如下: 1234567891011121 ...
現在很多網站會用到進入網站特效,到網頁沒有載入完成的時候,會有一個loding特效,載入完了之後才能看到頁面,今天就帶著做一個js進度條效果,今天要做的效果是純js進度條載入,沒有用到框架,方便大家進行深入理解:
首先我們要進行js進度條的佈局
js進度條佈局如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
</script> <style type="text/css" id='css'> #progress { position: fixed; background: #000; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; } #progress p { width: 0px; height: 30px; border-radius: 3px; background: #ffcccc; color: #330000; font-size: 14px; font-weight: bold; line-height: 30px; text-align: center; overflow: hidden; font-family: 'Microsoft yahei'; position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -250px; } body { overflow: hidden; } </style> </head> <body> <div id='progress'> <p>0%</p> </div> </body> |