纯CSS进度加载动画

一款简单实用的纯CSS进度加载动画，有多个不同的样式可以选择，均可直接复制元素和样式进行移植，喜欢的小伙伴们请收下吧。

分类：css3 > 进度条难易：入门级

查看演示下载资源下载积分： 10 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需要设置好6个进度加载的样式，代码较多，这里仅贴出部分代码：

body {
  background: #262E31;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  color: #FFC107;
}
h1 {
  font-weight: normal;
  margin: 30px 0 80px 0;
  text-align: center;
}

p {
  font-weight: normal;
  font-size: 22px;
  clear: both;
  text-align: center;
}

div {
  width: 30%;
  margin: 0 1.5%;
  height: 150px;
  text-align: center;
  float: left;
}

progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  width: 100%;
  height: 18px;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(200px) rotateX(0) rotateY(180deg);
            transform: perspective(200px) rotateX(0) rotateY(180deg);
  }
  50% {
    -webkit-transform: perspective(200px) rotateX(0) rotateY(0);
            transform: perspective(200px) rotateX(0) rotateY(0);
  }
  100% {
    -webkit-transform: perspective(200px) rotateX(180deg) rotateY(0);
            transform: perspective(200px) rotateX(180deg) rotateY(0);
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(200px) rotateX(0) rotateY(180deg);
            transform: perspective(200px) rotateX(0) rotateY(180deg);
  }
  50% {
    -webkit-transform: perspective(200px) rotateX(0) rotateY(0);
            transform: perspective(200px) rotateX(0) rotateY(0);
  }
  100% {
    -webkit-transform: perspective(200px) rotateX(180deg) rotateY(0);
            transform: perspective(200px) rotateX(180deg) rotateY(0);
  }
}
.p1 progress {
  width: 48px;
  height: 48px;
  -webkit-animation: flip 1.2s infinite ease-in-out;
          animation: flip 1.2s infinite ease-in-out;
}
.p1 progress::-webkit-progress-bar {
  background: #FFEE58;
}
.p1 progress::-webkit-progress-value {
  background: transparent;
}

.p2 progress::-webkit-progress-bar {
  background-color: #e1e1e1;
}
.p2 progress::-webkit-progress-value {
  background: -webkit-linear-gradient(45deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%);
  background: linear-gradient(45deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%);
  background-color: #ff7584;
  background-size: 40px 20px;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

页面的body部分，就是progress标签放置在6个不同div容器里面，代码如下：

<h1>纯CSS进度加载动画</h1>
<div class="p2">
    <progress max="100" value="40"></progress>
</div>

<div class="p3">
    <progress max="100" value="70"></progress>
</div>

<div class="p4">
    <progress></progress>
</div>

<div class="p5">
    <progress></progress>
</div>

<div class="p1">
    <progress max="100" value="70"></progress>
</div>

<div class="p6">
    <progress></progress>
</div>