純 CSS + 純字符實現的 loading 加載效果

Sponsor

等待加載、加載中的在網頁上是很常用的元素，實現方式也很多，其中直接用 GIF 動畫、CSS sprites 等，而今天介紹的就是以純 CSS + 純字符實現的 loading加載效果，樣式超級多，可選擇一款應用到你的網頁項目上吧。

項目名稱：text spinners
項目地址：http://tawian.io/text-spinners/

特色

• 純 CSS + 純字符實現
• 可以替換成自己喜歡的字符

使用教程

這是通過 CSS 和結合文字字符來實現的逐幀動畫，所以通過改變 font-family 字體，字符的樣式也會有所改變，同時大家也可以修改 CSS 文件，去更換你想要的字符。

STEP 1: 引入 CSS 代碼文件

<link rel="stylesheet" >

STEP 2：給HTML 標簽添加對應的 class 樣式，參考：

<span class="loading dots"></span>

樣式預覽

我們截圖了一部分預覽樣式，具體 DEMO 建議到官方查看。

 

 

 

 

完整視圖：

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。