CSS loading加载动画(旋转的圆环)

CSS loading 加载动画用于程序加载过程中的显示，它的作用是告诉用户程序还在进行中，不要关闭窗口。有些人用GIF图片来设计loading加载画面，本文介绍用纯CSS来实现一个loading加载动画。

demodownload

HTML

HTML代码十分简单，只有一个div，div里也只有一个类属性loader。

<div class="loader"></div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  border-width: 0.25rem;
  border-style: solid;
  border-color: gainsboro gainsboro dodgerblue gainsboro;
  border-radius: 50%;
  display: block;
  width: 4rem;
  height: 4rem;
  -webkit-animation: rotate 1.5s linear infinite;
          animation: rotate 1.5s linear infinite;
}

.loader 定义圆边的样式。

animation: rotate 1.5s linear infinite; 这里rotate意思为旋转，1.5s为每1.5秒完成一次运动，infinite为循环进行，linear为动画从头到尾的速度是相同的。

@keyframes rotate 定义圆环的旋转方向和角度。

您可能对以下文章也感兴趣

• CSS3 loading预加载动画旋转的圆弧【演示/源码下载】
• 4个漂亮的CSS3 Loading预加载动画实例
• CSS3 Loading 旋转圆盘加载动画
• CSS3 loading音波效果预加载动画
• CSS3 Loading预加载动画8个常见实例
• CSS Loading 左右滚动加载动画等5实例【源码下载】