學習 | css3實現進度條加載
進度條加載是頁面加載時的一種交互效果,這樣做的目的是提高用戶體驗。
進度條的的實現分為3大部分:1、頁面布局,2、進度條動效,3、何時進度條增加。
文件目錄
加載文件順序
<link rel="stylesheet/less" href="./index.less"> <script src="./zepto.min.js"></script> <script src="./less.js"></script> <script src="./rem.js"></script>
index.less是樣式文件
zepto是引入的庫
less.js是編譯less的
rem.js是移動端屏幕自適應
實現效果
1、頁面布局
頁面布局采用position布局,進度條居中,css采用less,布局風格為移動端,采用rem單位。
html
<section class="loadingBox"> <div class="progress"> <div class="run"></div> </div> </section>
less
html,body{ height: 100%; } .loadingBox{ background: #000000; height: 100%; overflow: hidden; position: relative; display: none; .progress{ @w:4.6; @h:.3; position: absolute; width: unit(@w,rem); height: unit(@h,rem); top: 50%; left: 50%; margin-left: unit(-@w/2,rem); margin-top: unit((-@h/2)+1, rem); background: #fff; border-radius: unit(@h/2,rem); .run{ position: absolute; top: 0; left: 0; width: 0; height: unit(@h, rem); // 起始顏色和終點顏色一致就沒漸變效果 transition: .3s; background: -webkit-linear-gradient(left bottom,#5cd85c 0%,#5cd85c 25%,#74c274 25%,#74c274 50%,#5cd85c 50%,#5cd85c 75%,#74c274 75%,#74c274 100%); background: linear-gradient(left bottom,#5cd85c 0%,#5cd85c 25%,#74c274 25%,#74c274 50%,#5cd85c 50%,#5cd85c 75%,#74c274 75%,#74c274 100%); background-size:unit(@h, rem) unit(@h, rem); // 從上往下動實現動的效果。 -webkit-border-radius: unit(@h/2, rem); border-radius: unit(@h/2, rem); // loadingMove 1s linear infinite both停在最後一幀 -webkit-animation: loadingMove .8s linear infinite both; animation: loadingMove .8s linear infinite both; } } } @-webkit-keyframes loadingMove{ 0%{ background-position: 0 0; } 100%{ background-position: 0 -.3rem; } } @keyframes loadingMove{ 0%{ background-position: 0 0; } 100%{ background-position: 0 -.3rem; } }
那麽問題來了進度條有一個向上走的波紋,波紋是如何實現的,波紋是如何動的,這兩個問題的原理是什麽
2、進度條動效
波紋是如何實現的
波紋的實現用到的background的 linear-gradient 0-25%是一個顏色,25%-50%是一個顏色,50%-75%是一個顏色,75%-100%是一個顏色,讓其不repeat 默認就是repeat的,完全填充進度條長度與寬度,代碼如下
background: linear-gradient(left bottom,#5cd85c 0%,#5cd85c 25%,#74c274 25%,#74c274 50%,#5cd85c 50%,#5cd85c 75%,#74c274 75%,#74c274 100%);
波紋是如何動起來的
動起來用到了css中的animation,讓進度條的背景從上往下走,就能實現動的效果,那麽如何實現從上往下走呢?答案就是用css3的animation的keyframes,0%是讓其position為0 0 100%的時候讓其position 0 -.3rem 。-.3rem就是進度條的高度,代碼如下,loadingMove是楨函數,.8s是持續時間0.8s,linear是線性變化,infinite是無限重復,both是每一循環停在最後一幀。
animation: loadingMove .8s linear infinite both;
loadingMove
@keyframes loadingMove{ 0%{ background-position: 0 0; } 100%{ background-position: 0 -.3rem; } }
3、何時進度條增加
眾所周知頁面上耗費最多的時間是圖片,那麽可不可以每加載一張圖片,就讓count加1,那麽加載n張再除以總的圖片數就是加載進度,加載進度。代碼中的邏輯就是,遍歷每張圖片,等待每張圖片加載完畢,count加1,同時更改進度條寬度,達到一個實時加載的效果。
let loadingRender = (function(){ let $loadingBox = $(".loadingBox"), $run = $loadingBox.find(".run"); // 計算圖片加載進度 let imgList =["./1.png","./2.png","./3.png","./4.png"]; let total = imgList.length, cur = 0; let computed = function(){ imgList.forEach(function(item){ let tempImg = new Image(); tempImg.src = item; tempImg.onload = function(){ cur++; runFn(); tempImg = null; } }) } let runFn = function(){ $run.css("width",(cur/total)*100+"%"); if (cur>=total) { // 進入的下一個區域的時間節點 let delay = setTimeout(function(){ clearTimeout(delay); },1500) } } return { init:function(){ $loadingBox.css("display","block"); computed(); } } })(); loadingRender.init();
其中runFn是增加寬度的函數,用了了setTimeout,目的是延緩一會加載,讓加載有點節奏,同理,css中transition: .3s;也是為了讓加載有節奏。
學習 | css3實現進度條加載