CSS3三种加载动画样式

CSS3 的加载动画真的是前端里的小魔法。页面还没加载完，先来个动画撑场面，不光提升体验，还显得有点专业范儿。今天分享三个我常用的加载样式，样式简单，效果还挺酷，适合各种项目场景，拿去直接用都行。

渐进式加载的动画比较适合那种图片多、内容重的页面。加载条慢慢推进，给用户一点“正在努力加载中”的安心感。用animation和@keyframes控制宽度从 0%到 100%，代码也不复杂：

.loading-bar {
  width: 0%;
  height: 5px;
  background-color: #3498db;
  animation: load 2s linear forwards;
}
@keyframes load {
  to { width: 100%; }
}

旋转动画就更常见了，像是熟悉的小圈圈。原理是用transform配合animation让元素持续旋转。简单搞个圆形边框，加个 top 色，转起来还挺顺眼：

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

过渡效果适合做那种状态切换的动效，比如提示文字的淡入淡出。场景也挺多，比如用户登录后加载欢迎信息。只要配个transition，再加个class切换就行：

.loading-text {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.loading-text.loaded {
  opacity: 1;
}

这三种加载方式其实可以混合用，比如边加载边显示内容，再来个旋转动画配合状态提示，用户体验直接拉满。如果你项目也需要点视觉反馈，不妨试试这些效果，手感还不错哦。