驚豔的無限循環加載動畫｜8月更文挑戰

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

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

背景

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

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

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

優秀的加載動畫特徵

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

最終效果

1、添加 HTML 文件

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

2、添加 CSS 文件

先初始化頁面

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

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

聲明 CSS 全局變量

1. CSS 全局變量聲明在 :root 文檔根元素中，語法爲 --*
2. CSS 全局變量使用語法爲 var(--*)

:root {
    --color-loader: #ce4233;
}
複製代碼

主要的 CSS 代碼

.loader {
    width: 250px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-weight: 900;
    color: var(--color-loader);
    letter-spacing: 0.2em;
}

.loader::before,
.loader::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: var(--color-loader);
    position: absolute;
    animation: load .7s infinite alternate ease-in-out;
}

.loader::before {
    top: 0;
}

.loader::after {
    bottom: 0;
}


@keyframes load {
    0% {
        left: 0;
        width: 15px;
        height: 30px;
    }

    50% {
        width: 40px;
        height: 8px;
    }

    100% {
        left: 235px;
        width: 15px;
        height: 30px;
    }
}
複製代碼

❤️ 感謝你們

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

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