2. 程式人生 > >CSS3實現頁面載入進度條

CSS3實現頁面載入進度條

阿新 • • 發佈：2018-11-08

什麼情況下會使用到頁面載入進度條？

當頁面中的需要載入的內容很多，使用者直接進入則看不到任何內容，體驗不好，這個時候就需要使用到頁面載入的一個動畫，在頁面載入結束後再

顯示主體內容。

實現頁面載入進度條有哪幾種方式？

一般可分為兩種，

1.設定多少時間後顯示頁面，

2.根據頁面載入的文件狀態來實現

 

如何根據文件狀態來實現？

document.onreadystatechange  頁面載入狀態改變時的事件
document.readyState  返回當前文件狀態
1.uninitialized 還未開始載入
2.loading   載入中
3.interactive  已載入，文件與使用者可以開始互動
 
4.complete  載入完成

<script>
    document.onreadystatechange = function(){
        if (document.readyState === 'complete') {
            alert('頁面載入完成')
        }
    }
</script>

在頁面載入完成後去掉載入動畫即可。

 

載入的小動畫如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content
 
="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        .loading{
            position: fixed;
            width: 100%;
            height: 100%;
            top:0;
            left: 0;
            z-index: 100;
            background:#fff;
        }
        .loading .pic{
            width: 50px;
            height: 50px;
            position: absolute;
            top: 
 
0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .loading .pic i{
            display: block;
            float: left;
            width: 6px;
            height: 50px;
            background: #399;
            margin: 0 2px;
            -webkit-transform: scaleY(0.4);
            -ms-transform: scaleY(0.4);
            transform: scaleY(0.4);
            -webkit-animation: load 1.2s infinite;
            animation: load 1.2s infinite;
        }
        .loading .pic i:nth-of-type(2){-webkit-animation-delay:0.1s;animation-delay:0.1s;}
        .loading .pic i:nth-of-type(3){-webkit-animation-delay:0.2s;animation-delay:0.2s;}
        .loading .pic i:nth-of-type(4){-webkit-animation-delay:0.3s;animation-delay:0.3s;}
        .loading .pic i:nth-of-type(5){-webkit-animation-delay:0.4s;animation-delay:0.4s;}
        @-webkit-keyframes load {
            0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
            20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
        }
        @keyframes load {
            0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
            20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
        }

    </style>
</head>
<body>
<div class="loading">
    <div class="pic">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</div>

</body>
</html>

 

友情提示：CSS3需要寫一些相容的語法，這裡有個網址，直接將CSS程式碼貼上過去就可以獲得所有相容的寫法 http://autoprefixer.github.io/

相關推薦

CSS3實現頁面載入進度條

什麼情況下會使用到頁面載入進度條？ 當頁面中的需要載入的內容很多，使用者直接進入則看不到任何內容，體驗不好，這個時候就需要使用到頁面載入的一個動畫，在頁面載入結束後再 顯示主體內容。 實現頁面載入進度條有哪幾種方式？ 一般可分為兩種， 1.設定多少時間後顯示頁面， 2.根據頁面載入的文件狀態來實現

淺談前端實現頁面載入進度條以及 nprogress.js 的實現

以前在 Vue 的專案用了 nprogress 這個外掛，一直對於其如何得知載入進度充滿好奇，最近又看到了「前端如何實現頁面載入進度條」這個問題，今天週六恰好一探究竟。以下僅為一家之言，如有異議，歡迎指出。 前端的頁面載入進度條有兩種 首先不得不說，前端的頁面載入進度條其實有兩種，所以你得先搞清楚說的是哪

頁面載入進度條實現——readyState和onreadystatechange

document.readyState 屬性返回當前文件的狀態（載入中……）。 共有四種取值： 1，uninitialized - 還未開始載入  uninitialized  英 [ʌnɪ'nɪʃlaɪzd]  未初始化 2，loading

進入頁面載入進度條

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

純css3實現的圓形進度條

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .spinner{ /*半透明藍色的圓弧，形

CSS3實現炫酷進度條

看了一個進度條很漂亮，所以自己試試看 html <div class="load-container"> <span class="run"></span> <div class="meter">0</div&

Android——仿微信公眾號文章頁面載入進度條

前言： 微信公眾號文章詳情頁面載入的時候，WebView會在頭部顯示一個進度條，這樣做的好處就是使用者可以一邊載入網頁內容的同時也可瀏覽網頁內容，不需要等完全載入完之後才全部顯示出來。如何實現呢？ 其實很簡單，自定義一個WebView就可以實現了。 詳細實現

通用頁面載入進度條

<html><head><META http-equiv=Content-Type content="text/html; charset=gb2312"><META HTTP-EQUIV="pragma" CONTENT="no-c

自定義View載入進度條首頁面

1.主頁面佈局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:

Unity3D 場景切換載入進度條實現

需要三個場景，場景A，場景B，場景C； 場景A：一個按鈕，點選載入場景B； 場景B：從A切換到C過度場景，載入進度條； 場景C：目標場景； 建立OnProgress.cs指令碼： using System.Collections; using System.Collections.Generic; usin

騰訊X5WebView+JsBridge互動及WebView載入進度條效果實現

最近在專案開發中有不少頁面需要採用html的方式實現，自然而然就涉及到原生和js的互動問題，WebView也提供了addJavascriptInterface方法可以進行js的互動，實現也比較簡單，由於需要互動的地方比較多，還是沒有采用這種方式，使用了JsBridge第三方來實現，JsBridg

淺談網站頭部載入進度條的實現---NProgress

我們在移動端的瀏覽器上經常能看到頁面上方有一個進度條載入，pc端網頁也有，例如開啟我的github主頁：https://github.com/fzg2lj 點選導航欄上的stars,就會出現一個載入進度條。實現這種效果有兩種方式。 第一種：利用ajax全域性請求方式 程式碼如下

基於vue2.x實現loading bar（載入進度條）元件

在這之前，我更新了有關一個單選框與複選框的元件實現，有興趣的小夥伴也可以瞭解一下，今天我們來介紹一下loading bar 元件的實現原理。 實現思路 整個元件ui部分有兩部分組成

JQuery實現頁面隨滾動條滾動而動態載入內容的效果

      新浪微博有這個功能,剛才思考一下 ,簡單的寫了一下實現方法,程式碼是Js的.      無可否認,這種方式應該算是web2.0的產物,在使用者體驗上具備很好的感受,除了微博在使用該方式外,另外我還發現有幾個其他性質的網站也在用這種方式,原因是他們的網站頁面比較長,所以使用者在瀏覽的時候隨著滾動條的

H5頁面標題欄部分載入進度條0%-100%

網頁進度條能夠更好的反應當前網頁的載入進度情況，loading進度條可用動畫的形式從開始0%到100%完成網頁載入這一過程。 首先我們要知道的是，目前沒有任何瀏覽器可以直接獲取正在載入物件的大小。所以我們無法通過資料大小來實現0-100%的載入顯示過程。 因此我們需要

《C/C++實現Console下的載入進度條模擬[美觀版]》

前言   有時候我們會遇到在CMD或DOS控制檯上出現的載入進度條，雖然不是如網頁和軟體寫的美觀。但確確實實也有著自己的特色。而且，一個好看的載入進度條也能增加使用者使用控制檯程式的體驗！所以，拿來研究一下也未嘗不可！   博主，一開始寫了個載入進度條的模擬。但是，效果不是很理想！於是，我默默地掏出了度娘..

python實現簡易的進度條

span div imp 進度 python stdout for flush logs 1 import sys,time 2 3 for i in range(50): 4 sys.stdout.write(‘#‘) 5 sys.stdout.flu

純CSS3制作圓形進度條所遇到的問題

order 我們 消失 樣式 近日 內部 右上角 圓形進度 spa 　　近日在開發的頁面中，需要制作一個動態的圓形進度條，首先想到的是利用兩個矩形，寬等於直徑的一半，高等於直徑，兩個矩形利用浮動貼在一起，設置overflow：hidden屬性，作為盒子，內部有一個與其寬高相

基於Jquery插件Uploadify實現實時顯示進度條上傳圖片

準備 深入學習 pla 回調 true bar put and 分割 網址：http://www.jb51.net/article/83811.htm 這篇文章主要介紹了基於Jquery插件Uploadify實現實時顯示進度條上傳圖片的相關資料，感興趣的小夥伴們可

圖解CSS3製作圓環形進度條的例項教程

圓環形進度條製作的基本思想還是畫出基本的弧線圖形,然後CSS3中我們可以控制其旋轉來串聯基本圖形,製造出部分消失的效果,下面就來帶大家學習圖解CSS3製作圓環形進度條的例項教程  首先，當有人說你能不能做一個圓形進度條效果出來時，如果是靜態完整圓形進度條，那麼就很簡單