上傳載入loading

2021-08-22 19:16:17 字數 943 閱讀 3607

loading的基本結構為

@keyframes loading

100%

}.site-loading

.site-loading

.active

.site-loading

::before

style>

id="siteloading"

class="site-loading">

div>

開始的時候我們讓這個loading看不見, 即visibility: hidden;. 當上傳時, 我們給div乙個active類. 讓動畫出現. 上傳完成後再將active去除, 消失動畫.

為了達到這個效果, 還需要乙個loading.js檔案. 這個loading檔案用於註冊動畫的show和hide動作.

window.eventhub.on

('beforeupload', ()=>)

window.eventhub.on

('afterupload', ()=>)

beforeupload用於新增active類, 此時動畫載入.

afterupload用於刪除active類, 此時動畫隱藏.

如何觸發呢? 當然是在upload-song.js檔案中. 這個檔案是處理檔案上傳相關事宜的.

'beforeupload': function

(up, file)

'fileuploaded': function

(up, file, info)

最後別忘了將這個檔案引入到admin.html中去,

這樣我們在上傳檔案的時候就可以了載入動畫了.

js spin 載入動畫(loading)

最近做頁面ajax載入是又用到loading動畫,還好有乙個spin.js 如果想在頁面裡出現loading動畫,大家只要這麼做就可以了 首先頁面裡要有 一定要有乙個包含.spin的標籤,然後呼叫 洒家 定義的function,就可以了 如 smallloadingicon w load 具體的lo...

WinForm 載入等待介面Loading

首先定義乙個載入介面介面,在載入介面可以實現該介面 載入介面介面 public inte ce iload 載入介面控制 載入介面控制 public class loadcontroller 設定載入狀態 public static string state value 關閉載入介面 public ...

UIWebView載入Loading 兩種方法

from 第一種方法 使用uiview and uiactivityindicatorview 建立uiwebview webview uiwebview alloc initwithframe cgrectmake 0 44 320 400 webview setuserinteractionen...