環形加載動畫｜8月更文挑戰

這是我參與8月更文挑戰的第10天，活動詳情查看：8月更文挑戰

做者：battleKing
倉庫：Github、CodePen
博客：CSDN、掘金
反饋郵箱：myh19970701@foxmail.com
特別聲明：原創不易，未經受權不得轉載或抄襲，如需轉載可聯繫筆者受權

背景

在用戶心目中，優秀的應用、工具、網站都應該是製做精良且能快速響應他們需求的產品。之前我在發佈一款產品的初版時，登陸驗證的 loading... 延遲是 2-3秒，結果當天反饋郵箱就被用戶擠爆了，大部分用戶都認爲這幾秒是一個界面忽然卡住是 軟件BUG ，其實只是咱們 驗證登陸信息 而已，因此若是沒有 加載動畫 告知用戶咱們在驗證登陸信息而只是讓軟件卡住不動的話，這是一種 很是很差的用戶體驗 ，雖然早期用戶可能會給你的產品第二次機會，但絕大多數人對這款產品失去信息，再也不使用，致使用戶大量流失。

解決方案：使用 加載動畫，提供 即便反饋，減小用戶焦慮

加載動畫分類：進度條加載動畫，無限循環加載動畫 和 骨架圖加載動畫

優秀的加載動畫特徵

1. 核心是 減小動畫時間
2. 給出 具體時間
3. 告訴用戶 爲何須要等待
4. 讓等待的過程不那麼讓人無聊 使用有趣的動畫
5. 減小用戶等待時間的心理感知 色彩、某個相關知識、某條產品操做教學
6. 透傳公司品牌形象 公司理念、公司價值觀、公司的標誌吉祥物

最終效果

1、添加 HTML 文件

1. HTML 方面比較簡單，咱們只須要添加一個 div 並命名爲 loader 就能夠了

<div class="loader"></div>
複製代碼

2、添加 CSS 文件

1. 設置 * 爲 box-sizing: border-box
2. 設置 body 來使整個項目居中

* {
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
複製代碼

主要的 CSS 代碼

1. 設置 loader 邊框爲 border: 2px solid transparent
2. 設置 loader 上邊框爲 border-top: 2px solid #409eff
3. 設置名爲 spin 的旋轉動畫 @keyframes spin
4. 爲 loader 添加上旋轉動畫 animation: spin 1s linear infinite
5. 兼容 Chrome 、 Firefox 、IE、Opera 瀏覽器
   • -moz- 表明 firefox 瀏覽器私有屬性
   • -ms- 表明 IE 瀏覽器私有屬性
   • -webkit- 表明 safari、chrome 私有屬性
   • -o- 表明 Opera

.loader {
    /* 透明邊框 */
    border: 2px solid transparent;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    /* 藍色邊框 */    
    border-top: 2px solid #409eff;
    border-radius: 50%;
    width: 120px;
    height: 120px;
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
複製代碼

❤️ 感謝你們

若是本文對你有幫助，就點個贊支持下吧，你的「贊」是我創做的動力。

若是你喜歡這篇文章的話，能夠「點贊」 + 「收藏」 + 「轉發」 給更多朋友。