环形加载动画｜8月更文挑战

YiHangMa
611 阅读3分钟

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

在用户心目中，优秀的应用、工具、网站都应该是制作精良且能快速响应他们需求的产品。以前我在发布一款产品的第一版时，登录验证的 loading... 延迟是 2-3秒，结果当天反馈邮箱就被用户挤爆了，大部分用户都认为这几秒是一个界面突然卡住是 软件BUG ，其实只是我们 验证登录信息 而已，所以如果没有 加载动画 告知用户我们在验证登录信息而只是让软件卡住不动的话，这是一种 非常不好的用户体验 ，虽然早期用户可能会给你的产品第二次机会，但绝大多数人对这款产品失去信息，不再使用，导致用户大量流失。

解决方案：使用 加载动画，提供 即使反馈，减少用户焦虑

加载动画分类：进度条加载动画，无限循环加载动画 和 骨架图加载动画

优秀的加载动画特征

  1. 核心是 减少动画时间
  2. 给出 具体时间
  3. 告诉用户 为什么需要等待
  4. 让等待的过程不那么让人无聊 使用有趣的动画
  5. 减少用户等待时间的心理感知 色彩、某个相关知识、某条产品操作教学
  6. 透传公司品牌形象 公司理念、公司价值观、公司的标志吉祥物

最终效果

环形加载动画gif.gif

一、添加 HTML 文件

  1. HTML 方面比较简单，我们只需要添加一个 div 并命名为 loader 就可以了
<div class="loader"></div>

二、添加 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);
    }
}

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。

avatar
文章
阅读
粉丝