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

原文：http://www.shejidaren.com/text-spinners.html

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

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

特色

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

使用教程

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

STEP 1: 引入 CSS 代碼文件

<link rel="stylesheet" href="http://tawian.io/text-spinners/spinners.css">

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

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

樣式預覽

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

 

 

 

 

完整視圖：

推薦：查看最受歡迎的 301 個設計網站 →  http://hao.shejidaren.com