前端頁面loading效果(CSS實現)
阿新 • • 發佈:2018-12-14
當首頁內容或圖片比較多時,載入時間會比較長,此時可能出現頁面白屏的情況,使用者體驗較差。所以,在頁面完全加載出來之前,可以考慮加入loading效果,當頁面完全載入完後,是loading消失即可。
1. 方法
html:
在頁面開頭部分加入:
<div id="loading">
<div class="loadingImage"></div>
</div>
js:
在頁面最後面引入:
$("#loading").fadeOut(400);
css:
#loading { background: #f3815e; position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 999; } .loadingImage { position: relative; width: 30px; height: 30px; background: #2e98df; border-radius: 50px; animation: loadingImage 1.5s infinite linear; } .loadingImage::after { position: absolute; width: 50px; height: 50px; border-top: 10px solid #b160d1; border-bottom: 10px solid #b160d1; border-left: 10px solid transparent; border-right: 10px solid transparent; border-radius: 50px; content: ''; top: -20px; left: -20px; animation: loadingImage_after 1.5s infinite linear; } @keyframes loadingImage { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); background: #2ecc71; } 100% { transform: rotate(360deg); } } @keyframes loadingImage_after { 0% { border-top: 10px solid #b160d1; border-bottom: 10px solid #b160d1; } 50% { border-top: 10px solid #2e98df; border-bottom: 10px solid #2e98df; } 100% { border-top: 10px solid #b160d1; border-bottom: 10px solid #b160d1; } }