常見兩種的loading樣式（css實現）

2021-07-31 14:17:47 字數 915 閱讀 7695

loading樣式1title>


type="text/css">


.loading


@keyframes loading


100%


}style>


head>


class="loading">


div>


body>


html>
第二種loading的效果圖如下所示：

實現原理也是利用css中的anmiation屬性，具體實現在**中能很直觀的體現，**如下：

loading2title>


type="text/css">


.loading


.loading


.bar


/*float元素的外邊距不會合併*/


.bar


i /*設定第六個點高亮，這個點的兩邊都有5個點*/


.bar


i:nth-child(6)


@keyframes loading


80%,100%


}style>


head>


class="loading">


class="bar">


i>


i>


i>


i>


i>


i>


i>


i>


i>


i>


i>


div>


div>


body>


html>
這兩種實現方法是為練習使用，沒考慮相容性問題，但在高版本的瀏覽器中都能實現效果圖，具體的相容性說明可參考mdn或w3cshool。

UIWebView載入Loading 兩種方法

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

UIWebView載入Loading 兩種方法

uiwebview載入loading.兩種方法 第一種方法 使用uiview and uiactivityindicatorview 建立uiwebview webview uiwebview alloc initwithframe cgrectmake 0,44,320,400 webview s...

UIWebView載入Loading 兩種方法

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