广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

本篇文章给大家分享10+个loading加载特效，保证让你的项目大放异彩，希望对大家有所帮助，快来收藏吧！！

相信大家经常会使用到加载动画，但是大部分组件库的加载样式都太简洁了。

这次给前端工友们收集了10+个高逼格加载动画效果！！复制就能直接用！！

跳动旋转的的方块再加上渐变的影子简单的构成了一个物体滚动的画面

<!-- loading.html --><div class="boxLoading"></div>

/* loading.css */.boxLoading {    width: 50px;  height: 50px;  margin: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.boxLoading:before {  content: '';  width: 50px;  height: 5px;  background: #fff;  opacity: 0.7;  position: absolute;  top: 59px;  left: 0;  border-radius: 50%;  animation: shadow .5s linear infinite;}.boxLoading:after {  content: '';  width: 50px;  height: 50px;  background: #e04960;  animation: animate .5s linear infinite;  position: absolute;  top: 0;  left: 0;  border-radius: 3px;}@keyframes animate {  17% {    border-bottom-right-radius: 3px;  }  25% {    transform: translateY(9px) rotate(22.5deg);  }  50% {    transform: translateY(18px) scale(1, .9) rotate(45deg);    border-bottom-right-radius: 40px;  }  75% {    transform: translateY(9px) rotate(67.5deg);  }  100% {    transform: translateY(0) rotate(90deg);  }}@keyframes shadow {  0%, 100% {    transform: scale(1, 1);  }  50% {    transform: scale(1.2, 1);  }}

Author：Dicson

当每个消失的方块集成一起再设置不同的消失时间会发生什么事情呢？

<!-- loading.html --><div class="sk-cube-grid">    <div class="sk-cube sk-cube-1"></div>    <div class="sk-cube sk-cube-2"></div>    <div class="sk-cube sk-cube-3"></div>    <div class="sk-cube sk-cube-4"></div>    <div class="sk-cube sk-cube-5"></div>    <div class="sk-cube sk-cube-6"></div>    <div class="sk-cube sk-cube-7"></div>    <div class="sk-cube sk-cube-8"></div>    <div class="sk-cube sk-cube-9"></div>  </div>

/* loading.css */.sk-cube-grid {  width: 4em;  height: 4em;  margin: auto; }.sk-cube {  width: 33%;  height: 33%;  background-color: #e04960;  float: left;  animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;}.sk-cube-1 {  animation-delay: 0.2s;}.sk-cube-2 {  animation-delay: 0.3s;}.sk-cube-3 {  animation-delay: 0.4s;}.sk-cube-4 {  animation-delay: 0.1s;}.sk-cube-5 {  animation-delay: 0.2s;}.sk-cube-6 {  animation-delay: 0.3s;}.sk-cube-7 {  animation-delay: 0s;}.sk-cube-8 {  animation-delay: 0.1s;}.sk-cube-9 {  animation-delay: 0.2s;}@keyframes sk-cube-grid-scale-delay {  0%, 70%, 100% {    transform: scale3D(1,1,1);  }  35%           {    transform: scale3D(0,0,1);  }}

Author：Nicola Pressi

四个镰刀来回劈斩会形成一个什么现象呢？

<!-- loading.html --><div class="spinner">  <div class="outer">    <div class="inner tl"></div>    <div class="inner tr"></div>    <div class="inner br"></div>    <div class="inner bl"></div>  </div></div>

/* loading.css */.spinner {  position: absolute;  width: 128px;  height: 128px;  top: calc(50% - 64px);  left: calc(50% - 64px);  transform: perspective(206px) rotateX(45deg);}.outer {  box-sizing: border-box;  animation: spin 3s linear infinite;  height: 100%;}.inner {  position: absolute;  border-radius: 50%;  width: 64px;  height: 64px;  animation: spin 1.8s ease-in-out infinite;}.inner.tl {  top: 0;  left: 0;  border-top: 2px solid #531430;  border-left: 4px solid #531430;}.inner.tr {  top: 0;  right: 0;  border-top: 2px solid #e04960;  border-right: 4px solid #e04960;}.inner.br {  bottom: 0;  right: 0;  border-bottom: 2px solid #531430;  border-right: 4px solid #531430;}.inner.bl {  bottom: 0;  left: 0;  border-bottom: 2px solid #e04960;  border-left: 4px solid #e04960;}@keyframes spin {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }}

Author：Martin van Driel

简单的正方形旋转再加上内部的高度控制即可实现填充效果喔~

<!-- loading.html --><span class="loading">  <span class="loading-inner"></span></span>

/* loading.css */.loading {  display: inline-block;  width: 30px;  height: 30px;  position: relative;  border: 4px solid #e04960;  animation: loader 4s infinite ease;}.loading-inner {  vertical-align: top;  display: inline-block;  width: 100%;  background-color: #e04960;  animation: loader-inner 4s infinite ease-in;}@keyframes loader {  0% {    transform: rotate(0deg);  }  25% {    transform: rotate(180deg);  }  50% {    transform: rotate(180deg);  }  75% {    transform: rotate(360deg);  }  100% {    transform: rotate(360deg);  }}@keyframes loader-inner {  0% {    height: 0%;  }    25% {    height: 0%;  }  50% {    height: 100%;  }  75% {    height: 100%;  }   100% {    height: 0%;  }}

Author：Josh

1个元素缩放很简陋，那15个会发生什么？

<!-- loading.html --><div class="loader">  <span></span>  <span></span>  <span></span>  <span></span>  <span></span>  <span></span>  <span></span>  <span></span>  <span></span>  <span></span>  <span></span>  <span></span>  <span></span>  <span></span>  <span></span></div>

/* loading.css */.loader {  position: absolute;  top: 0px;  bottom: 0px;  left: 0px;  right: 0px;  margin: auto;  width: 175px;  height: 100px;}.loader span {  display: block;  background: #e04960;  width: 7px;  height: 100%;  border-radius: 14px;  margin-right: 5px;  float: left;}.loader span:last-child {  margin-right: 0px;}.loader span:nth-child(1) {  animation: load 2.5s 1.4s infinite linear;}.loader span:nth-child(2) {  animation: load 2.5s 1.2s infinite linear;}.loader span:nth-child(3) {  animation: load 2.5s 1s infinite linear;}.loader span:nth-child(4) {  animation: load 2.5s 0.8s infinite linear;}.loader span:nth-child(5) {  animation: load 2.5s 0.6s infinite linear;}.loader span:nth-child(6) {  animation: load 2.5s 0.4s infinite linear;}.loader span:nth-child(7) {  animation: load 2.5s 0.2s infinite linear;}.loader span:nth-child(8) {  animation: load 2.5s 0s infinite linear;}.loader span:nth-child(9) {  animation: load 2.5s 0.2s infinite linear;}.loader span:nth-child(10) {  animation: load 2.5s 0.4s infinite linear;}.loader span:nth-child(11) {  animation: load 2.5s 0.6s infinite linear;}.loader span:nth-child(12) {  animation: load 2.5s 0.8s infinite linear;}.loader span:nth-child(13) {  animation: load 2.5s 1s infinite linear;}.loader span:nth-child(14) {  animation: load 2.5s 1.2s infinite linear;}.loader span:nth-child(15) {  animation: load 2.5s 1.4s infinite linear;}@keyframes load {  0% {    background: #531430;    transform: scaleY(0.08);  }  50% {    background: #e04960;           transform: scaleY(1);  }  100% {    background: #531430;        transform: scaleY(0.08);  }}

Author：Dicson

元素透明度与高度的配合也能做别具一格的效果

/* loading.css */.boxLoading {    width: 50px;  height: 50px;  margin: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.boxLoading:before {  content: '';  width: 50px;  height: 5px;  background: #fff;  opacity: 0.7;  position: absolute;  top: 59px;  left: 0;  border-radius: 50%;  animation: shadow .5s linear infinite;}.boxLoading:after {  content: '';  width: 50px;  height: 50px;  background: #e04960;  animation: animate .5s linear infinite;  position: absolute;  top: 0;  left: 0;  border-radius: 3px;}@keyframes animate {  17% {    border-bottom-right-radius: 3px;  }  25% {    transform: translateY(9px) rotate(22.5deg);  }  50% {    transform: translateY(18px) scale(1, .9) rotate(45deg);    border-bottom-right-radius: 40px;  }  75% {    transform: translateY(9px) rotate(67.5deg);  }  100% {    transform: translateY(0) rotate(90deg);  }}@keyframes shadow {  0%, 100% {    transform: scale(1, 1);  }  50% {    transform: scale(1.2, 1);  }}0

/* loading.css */.boxLoading {    width: 50px;  height: 50px;  margin: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.boxLoading:before {  content: '';  width: 50px;  height: 5px;  background: #fff;  opacity: 0.7;  position: absolute;  top: 59px;  left: 0;  border-radius: 50%;  animation: shadow .5s linear infinite;}.boxLoading:after {  content: '';  width: 50px;  height: 50px;  background: #e04960;  animation: animate .5s linear infinite;  position: absolute;  top: 0;  left: 0;  border-radius: 3px;}@keyframes animate {  17% {    border-bottom-right-radius: 3px;  }  25% {    transform: translateY(9px) rotate(22.5deg);  }  50% {    transform: translateY(18px) scale(1, .9) rotate(45deg);    border-bottom-right-radius: 40px;  }  75% {    transform: translateY(9px) rotate(67.5deg);  }  100% {    transform: translateY(0) rotate(90deg);  }}@keyframes shadow {  0%, 100% {    transform: scale(1, 1);  }  50% {    transform: scale(1.2, 1);  }}1

Author：El Alemaño

4个圆居然能做出相对排斥的效果？

/* loading.css */.boxLoading {    width: 50px;  height: 50px;  margin: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.boxLoading:before {  content: '';  width: 50px;  height: 5px;  background: #fff;  opacity: 0.7;  position: absolute;  top: 59px;  left: 0;  border-radius: 50%;  animation: shadow .5s linear infinite;}.boxLoading:after {  content: '';  width: 50px;  height: 50px;  background: #e04960;  animation: animate .5s linear infinite;  position: absolute;  top: 0;  left: 0;  border-radius: 3px;}@keyframes animate {  17% {    border-bottom-right-radius: 3px;  }  25% {    transform: translateY(9px) rotate(22.5deg);  }  50% {    transform: translateY(18px) scale(1, .9) rotate(45deg);    border-bottom-right-radius: 40px;  }  75% {    transform: translateY(9px) rotate(67.5deg);  }  100% {    transform: translateY(0) rotate(90deg);  }}@keyframes shadow {  0%, 100% {    transform: scale(1, 1);  }  50% {    transform: scale(1.2, 1);  }}2

/* loading.css */.boxLoading {    width: 50px;  height: 50px;  margin: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.boxLoading:before {  content: '';  width: 50px;  height: 5px;  background: #fff;  opacity: 0.7;  position: absolute;  top: 59px;  left: 0;  border-radius: 50%;  animation: shadow .5s linear infinite;}.boxLoading:after {  content: '';  width: 50px;  height: 50px;  background: #e04960;  animation: animate .5s linear infinite;  position: absolute;  top: 0;  left: 0;  border-radius: 3px;}@keyframes animate {  17% {    border-bottom-right-radius: 3px;  }  25% {    transform: translateY(9px) rotate(22.5deg);  }  50% {    transform: translateY(18px) scale(1, .9) rotate(45deg);    border-bottom-right-radius: 40px;  }  75% {    transform: translateY(9px) rotate(67.5deg);  }  100% {    transform: translateY(0) rotate(90deg);  }}@keyframes shadow {  0%, 100% {    transform: scale(1, 1);  }  50% {    transform: scale(1.2, 1);  }}3

Author：Martin van Driel

一个个的小弹珠来回移动居然也能描绘出如此美妙的画面

/* loading.css */.boxLoading {    width: 50px;  height: 50px;  margin: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.boxLoading:before {  content: '';  width: 50px;  height: 5px;  background: #fff;  opacity: 0.7;  position: absolute;  top: 59px;  left: 0;  border-radius: 50%;  animation: shadow .5s linear infinite;}.boxLoading:after {  content: '';  width: 50px;  height: 50px;  background: #e04960;  animation: animate .5s linear infinite;  position: absolute;  top: 0;  left: 0;  border-radius: 3px;}@keyframes animate {  17% {    border-bottom-right-radius: 3px;  }  25% {    transform: translateY(9px) rotate(22.5deg);  }  50% {    transform: translateY(18px) scale(1, .9) rotate(45deg);    border-bottom-right-radius: 40px;  }  75% {    transform: translateY(9px) rotate(67.5deg);  }  100% {    transform: translateY(0) rotate(90deg);  }}@keyframes shadow {  0%, 100% {    transform: scale(1, 1);  }  50% {    transform: scale(1.2, 1);  }}4

/* loading.css */.boxLoading {    width: 50px;  height: 50px;  margin: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.boxLoading:before {  content: '';  width: 50px;  height: 5px;  background: #fff;  opacity: 0.7;  position: absolute;  top: 59px;  left: 0;  border-radius: 50%;  animation: shadow .5s linear infinite;}.boxLoading:after {  content: '';  width: 50px;  height: 50px;  background: #e04960;  animation: animate .5s linear infinite;  position: absolute;  top: 0;  left: 0;  border-radius: 3px;}@keyframes animate {  17% {    border-bottom-right-radius: 3px;  }  25% {    transform: translateY(9px) rotate(22.5deg);  }  50% {    transform: translateY(18px) scale(1, .9) rotate(45deg);    border-bottom-right-radius: 40px;  }  75% {    transform: translateY(9px) rotate(67.5deg);  }  100% {    transform: translateY(0) rotate(90deg);  }}@keyframes shadow {  0%, 100% {    transform: scale(1, 1);  }  50% {    transform: scale(1.2, 1);  }}5

Author：Richie

每个圆进行粘合拆分形成了一个胶粘效果

/* loading.css */.boxLoading {    width: 50px;  height: 50px;  margin: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.boxLoading:before {  content: '';  width: 50px;  height: 5px;  background: #fff;  opacity: 0.7;  position: absolute;  top: 59px;  left: 0;  border-radius: 50%;  animation: shadow .5s linear infinite;}.boxLoading:after {  content: '';  width: 50px;  height: 50px;  background: #e04960;  animation: animate .5s linear infinite;  position: absolute;  top: 0;  left: 0;  border-radius: 3px;}@keyframes animate {  17% {    border-bottom-right-radius: 3px;  }  25% {    transform: translateY(9px) rotate(22.5deg);  }  50% {    transform: translateY(18px) scale(1, .9) rotate(45deg);    border-bottom-right-radius: 40px;  }  75% {    transform: translateY(9px) rotate(67.5deg);  }  100% {    transform: translateY(0) rotate(90deg);  }}@keyframes shadow {  0%, 100% {    transform: scale(1, 1);  }  50% {    transform: scale(1.2, 1);  }}6

/* loading.css */.boxLoading {    width: 50px;  height: 50px;  margin: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.boxLoading:before {  content: '';  width: 50px;  height: 5px;  background: #fff;  opacity: 0.7;  position: absolute;  top: 59px;  left: 0;  border-radius: 50%;  animation: shadow .5s linear infinite;}.boxLoading:after {  content: '';  width: 50px;  height: 50px;  background: #e04960;  animation: animate .5s linear infinite;  position: absolute;  top: 0;  left: 0;  border-radius: 3px;}@keyframes animate {  17% {    border-bottom-right-radius: 3px;  }  25% {    transform: translateY(9px) rotate(22.5deg);  }  50% {    transform: translateY(18px) scale(1, .9) rotate(45deg);    border-bottom-right-radius: 40px;  }  75% {    transform: translateY(9px) rotate(67.5deg);  }  100% {    transform: translateY(0) rotate(90deg);  }}@keyframes shadow {  0%, 100% {    transform: scale(1, 1);  }  50% {    transform: scale(1.2, 1);  }}7

Author：Dicson

巧妙的运用位移也能做出碰撞挤出的效果

/* loading.css */.boxLoading {    width: 50px;  height: 50px;  margin: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.boxLoading:before {  content: '';  width: 50px;  height: 5px;  background: #fff;  opacity: 0.7;  position: absolute;  top: 59px;  left: 0;  border-radius: 50%;  animation: shadow .5s linear infinite;}.boxLoading:after {  content: '';  width: 50px;  height: 50px;  background: #e04960;  animation: animate .5s linear infinite;  position: absolute;  top: 0;  left: 0;  border-radius: 3px;}@keyframes animate {  17% {    border-bottom-right-radius: 3px;  }  25% {    transform: translateY(9px) rotate(22.5deg);  }  50% {    transform: translateY(18px) scale(1, .9) rotate(45deg);    border-bottom-right-radius: 40px;  }  75% {    transform: translateY(9px) rotate(67.5deg);  }  100% {    transform: translateY(0) rotate(90deg);  }}@keyframes shadow {  0%, 100% {    transform: scale(1, 1);  }  50% {    transform: scale(1.2, 1);  }}8

/* loading.css */.boxLoading {    width: 50px;  height: 50px;  margin: auto;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}.boxLoading:before {  content: '';  width: 50px;  height: 5px;  background: #fff;  opacity: 0.7;  position: absolute;  top: 59px;  left: 0;  border-radius: 50%;  animation: shadow .5s linear infinite;}.boxLoading:after {  content: '';  width: 50px;  height: 50px;  background: #e04960;  animation: animate .5s linear infinite;  position: absolute;  top: 0;  left: 0;  border-radius: 3px;}@keyframes animate {  17% {    border-bottom-right-radius: 3px;  }  25% {    transform: translateY(9px) rotate(22.5deg);  }  50% {    transform: translateY(18px) scale(1, .9) rotate(45deg);    border-bottom-right-radius: 40px;  }  75% {    transform: translateY(9px) rotate(67.5deg);  }  100% {    transform: translateY(0) rotate(90deg);  }}@keyframes shadow {  0%, 100% {    transform: scale(1, 1);  }  50% {    transform: scale(1.2, 1);  }}9

Author：Paul Grant

有Switch的同学应该很熟悉了，这就是eshop里面的加载

<!-- loading.html --><div class="sk-cube-grid">    <div class="sk-cube sk-cube-1"></div>    <div class="sk-cube sk-cube-2"></div>    <div class="sk-cube sk-cube-3"></div>    <div class="sk-cube sk-cube-4"></div>    <div class="sk-cube sk-cube-5"></div>    <div class="sk-cube sk-cube-6"></div>    <div class="sk-cube sk-cube-7"></div>    <div class="sk-cube sk-cube-8"></div>    <div class="sk-cube sk-cube-9"></div>  </div>0

<!-- loading.html --><div class="sk-cube-grid">    <div class="sk-cube sk-cube-1"></div>    <div class="sk-cube sk-cube-2"></div>    <div class="sk-cube sk-cube-3"></div>    <div class="sk-cube sk-cube-4"></div>    <div class="sk-cube sk-cube-5"></div>    <div class="sk-cube sk-cube-6"></div>    <div class="sk-cube sk-cube-7"></div>    <div class="sk-cube sk-cube-8"></div>    <div class="sk-cube sk-cube-9"></div>  </div>1

Author：Steve Meredith

更多编程相关知识，请访问：编程入门！！

以上就是10+个让你的项目大放异彩的CSS loading加载特效，快来收藏吧！！的详细内容，更多请关注9543建站博客其它相关文章！