2. 程式人生 > >頁面loading效果實現程式碼

頁面loading效果實現程式碼

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

有些頁面載入起來比較慢，為了加強使用者體驗效果，所以一般都會做一個頁面載入等待的提示，頁面載入完成後消失。
下面提供一個可以拿來即用的方案。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .index-loading {
          position: fixed;
          z-index
 
: 100;
          width: 100px;
          height: 100px;
          left: 50%;
          top: 50%;
          margin-left: -50px;
          margin-top: -50px;
          -webkit-animation: progressRotate 0.6s linear infinite;
          animation: progressRotate 0.6s linear infinite;
        }

        @-webkit-keyframes
 
 progressRotate {
          0% {
            -webkit-transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
          }
        }

        @keyframes progressRotate {
          0% {
            -webkit-transform: rotate(0deg);
          }
          100% {
            -webkit-transform
 
: rotate(360deg);
          }
        }
    </style>
</head>
<body>
    <img class="index-loading" src="data:image/png;base64,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" />
</body>
</html>

效果如下：
順時針旋轉
loading效果將會順時針旋轉。

相關推薦

頁面loading效果實現程式碼

有些頁面載入起來比較慢，為了加強使用者體驗效果，所以一般都會做一個頁面載入等待的提示，頁面載入完成後消失。 下面提供一個可以拿來即用的方案。 <!DOCTYPE html> <html lang="en"> <head> <meta

前端頁面loading效果(CSS實現)

當首頁內容或圖片比較多時，載入時間會比較長，此時可能出現頁面白屏的情況，使用者體驗較差。所以，在頁面完全加載出來之前，可以考慮加入loading效果，當頁面完全載入完後，是loading消失即可。 1. 方法 html: 在頁面開頭部分加入： <div id="loading">

Loading效果實現：載入新頁面前的等待過渡畫面

由於最近在寫一個web專案，由於前端框架開發，和後臺查資料的語法不成熟導致頁面載入速度過慢，遂想到用loading效果來過渡: 粗略的查閱了下網上的實現方法，在此總結下方法實現 先上效果圖： 程式碼： <link rel="stylesheet" href="http://lee.dkf

vue實戰之狗血事件：頁面loading效果詭異之事

after 不變 編譯 全局 before 組件 定時器 route vuex 接上回 想加一個切換路由時，跳出一個loading動畫 ，路由加載後就消失 先做了一個loading提示的浮動層的組件，全局註冊，在幾個路由頁面都引入 在vuex裏面維護一個變量比如isLoad

UITabView頁面切換效果實現

方法一： - (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item { NSUInteger controlle

Js: loading效果實現

function easy_loading(id){ var symbol = ['-', '\\', '|', '/'], elem = document.getElementById(id), i = 0;

頁面導航效果實現總結

1 juery.anchor.js外掛應用 1.1 anchor.js 是簡單且有用的 jQuery 外掛，為所有本地連結提供一個平滑的動畫，然後跳轉到頁面的任意一個元素。 使用：需要在導航頁面做繫結，例如： <li><a href="#home"clas

CSS實現的loading頁面等待效果

            有些頁面載入起來比較慢，為了加強使用者體驗效果，所以一般都會做一個頁面載入等待的提示，頁面載入完成後消失。下面是用CSS實現的一個簡單的頁面載入等待效果，大家可以參考： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HT

Android實戰簡易教程-第二十六槍（基於ViewPager實現微信頁面切換效果）

stat addview data android tid des viewpage 聊天 == 1.頭部布局文件top.xml:<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and

Angularjs註入攔截器實現Loading效果

loading mark func code hid js註入 如果 date() osi angularjs作為一個全ajax的框架，對於請求，如果頁面上不做任何操作的話，在結果煩回來之前，頁面是沒有任何響應的，不像普通的HTTP請求，會有進度條之類。 什麽是攔截器？

CSS3實現10種Loading效果（轉）

技術分享 mes borde chan idt 1.2 logs -c tran 昨晚用CSS3實現了幾種常見的Loading效果，雖然很簡單，但還是分享一下，順便也當是做做筆記…… 第1種效果： 代碼如下： <div class="loading">

content+animation實現loading效果

pre step ali ... hid href tps loading anim <dot></dot> dot { display: inline-block; height: 1em; line-height: 1;

CSS3實現的幾個小loading效果

css linear 1.2 普通 dong 500px 交叉 yellow index 　　　　昨晚上閑的沒事突然想做幾個小loading效果，下面是昨晚上做的幾個小案例，分享給大家 　　　　1.水波loading：這個loading是我覺得非常簡單，但是看上去的效果卻非

【重點突破】—— 各種真·假Loading效果的實現

stat per https filter expr ie9 覆蓋 set 生成 前言：因為公司做廣告展示的項目較多，每個三維模型的加載都需要一段時間，通常這段時間由一個Loading加載頁動態呈現，這裏是除公司框架公用loading.js之外單獨用的幾種常見方式。

jquery實現點選按鈕返回到頁面頂部效果

有的時候我們需要實現點選按鈕回到頁面頂部的效果，下面就是我的實現 首先HTML程式碼如下 <div class="QZ-up" style="display: none;"></div> 當滾動條高度大於120px的時候出現按鈕如下

H5 分幀(frameset) 使用分幀寫一個頁面，可以實現點選聯動效果

需要兩個檔案： 檔案3.html <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8"

Vue實現移動端頁面切換效果

找了好多部落格實現效果都……emmm……   應用Vue自帶的過渡 《 進入/離開 & 列表過渡 》和 巢狀路由 和 fixed定位實現 其實還是挺簡單的。 在子頁面把整個頁面做絕對定位，覆蓋整個螢幕，子父頁面將 router-view 用&n

Java&Selenium自動化測試實現頁面元素、頁面物件及測試程式碼分離

一、摘要 本篇博文將介紹自動化測試實現頁面元素、頁面物件及測試程式碼分離在自動化框架中的實現 二、解析頁面元素定位資訊 首先，將頁面元素與實際的程式碼分離，首先我們將頁面元素定位資訊和定位表示式儲存在屬性檔案中，例如我們PaaS平臺提供Mysql服務的頁面，在工程中新建一個名為MysqlService.

使用dropdownlist能實現不重新整理頁面的效果具體例子

至少VS2008 sp1 以上 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> //ASP.NET中使用UpdatePanel實現區域性非同步重新整

jQuery載入全部頁面完成前的loading效果

此效果的原理：在頁面載入完成前在整個頁面上邊覆蓋一層，即loading層，等到頁面載入完成後，將loading層隱藏。 此效果的HTML程式碼部分：在整個程式碼前，新增div，即loading層（可以新增load的圖片，也可以當做背景圖寫在css裡） <div id="load