css加载动画

更多样式：

点击进入：https://www.fly63.com/tool/loading/

源码

<div class="loaders">
  <div class="loader circle-loader-1"></div>
  <div class="loader circle-loader-2"></div>
  <div class="loader square-loader"></div>
  <div class="loader google-loader">
    <div class="google-loader-bar"></div>
    <div class="google-loader-bar"></div>
    <div class="google-loader-bar"></div>
    <div class="google-loader-bar"></div>
  </div>
</div>
<style>
html, body {
  background-color: #182935;
  width: 100%;
  height: 100%;
  margin: 0px;
  font-family: 'Roboto', sans-serif;
}

.loaders {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
}

.loader {
  min-width: 100px;
}

/* circle loaders */

.circle-loader-1 {
  width: 100px;
  min-width: 100px;
  height: 100px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  border-radius: 50%;
  border-top: 10px solid rgba(255, 255, 255, 0.2);
  border-right: 10px solid rgba(255, 255, 255, 0.2);
  border-bottom: 10px solid rgba(255, 255, 255, 0.2);
  border-left: 10px solid rgba(255, 255, 255, 1);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: circle-loader-spin 1s infinite linear;
  animation: circle-loader-spin 1s infinite linear;
}

.circle-loader-2 {
  width: 100px;
  min-width: 100px;
  height: 100px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  border-radius: 50%;
  border-top: 10px solid rgba(255, 255, 255, 0);
  border-right: 10px solid rgba(255, 255, 255, 1);
  border-bottom: 10px solid rgba(255, 255, 255, 1);
  border-left: 10px solid rgba(255, 255, 255, 1);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: circle-loader-spin 1s infinite linear;
  animation: circle-loader-spin 1s infinite linear;
}

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

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* square loader */

.square-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: #FFFFFF;
  animation: rotate 1s infinite ease-in-out;
}

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

/* google styled loader */

.google-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 100px;
  height: 100px;
}

.google-loader-bar {
  display: inline-block;
  width: 5px;
  height: 50px;
  border-radius: 5px;
  margin: 2px;
  animation: google-loading 1s ease-in-out infinite;
  background-color: #FFFFFF;
}
.google-loader-bar:nth-child(1) {
  animation-delay: 0;
}
.google-loader-bar:nth-child(2) {
  animation-delay: 0.1s;
}
.google-loader-bar:nth-child(3) {
  animation-delay: .2s;
}
.google-loader-bar:nth-child(4) {
  animation-delay: .3s;
}

@keyframes google-loading {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 2);
  }
  40% {
    transform: scale(1);
  }
}
</style>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/33_1588