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

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

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

背景

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

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

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

优秀的加载动画特征

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

最终效果

1、添加 HTML 文件

HTML 方面比较简单，咱们只须要添加一个 div 并命名为 loader 就能够了

<div class="loader"></div>
复制代码

2、添加 CSS 文件

设置 * 为 box-sizing: border-box
设置 body 来使整个项目居中

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

主要的 CSS 代码浏览器

设置 loader 边框为 border: 2px solid transparent
设置 loader 上边框为 border-top: 2px solid #409eff
设置名为 spin 的旋转动画 @keyframes spin
为 loader 添加上旋转动画 animation: spin 1s linear infinite
兼容 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);
    }
}
复制代码

❤️ 感谢你们

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

若是你喜欢这篇文章的话，能够「点赞」 + 「收藏」 + 「转发」给更多朋友。工具