网站加载中loading..样式五代码介绍

css代码：

body {
  background:#1b1d1f;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  padding:0;
  margin:0
}
.loader {
  position:absolute;
  left:50%;
  top:50%;
  width:48.2842712474619px;
  height:48.2842712474619px;
  margin-left:-24.14213562373095px;
  margin-top:-24.14213562373095px;
  border-radius:100%;
  -webkit-animation-name:loader;
  animation-name:loader;
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  animation-timing-function:linear;
  -webkit-animation-duration:4s;
  animation-duration:4s
}
.loader .side {
  display:block;
  width:6px;
  height:20px;
  background-color:#f1404b;
  margin:2px;
  position:absolute;
  border-radius:50%;
  -webkit-animation-duration:1.5s;
  animation-duration:1.5s;
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
  -webkit-animation-timing-function:ease;
  animation-timing-function:ease
}
.loader .side:nth-child(1),.loader .side:nth-child(5) {
  transform:rotate(0deg);
  -webkit-animation-name:rotate0;
  animation-name:rotate0
}
.loader .side:nth-child(3),.loader .side:nth-child(7) {
  transform:rotate(90deg);
  -webkit-animation-name:rotate90;
  animation-name:rotate90
}
.loader .side:nth-child(2),.loader .side:nth-child(6) {
  transform:rotate(45deg);
  -webkit-animation-name:rotate45;
  animation-name:rotate45
}
.loader .side:nth-child(4),.loader .side:nth-child(8) {
  transform:rotate(135deg);
  -webkit-animation-name:rotate135;
  animation-name:rotate135
}
.loader .side:nth-child(1) {
  top:24.14213562373095px;
  left:48.2842712474619px;
  margin-left:-3px;
  margin-top:-10px;
  -webkit-animation-delay:0;
  animation-delay:0
}
.loader .side:nth-child(2) {
  top:41.21320343109277px;
  left:41.21320343109277px;
  margin-left:-3px;
  margin-top:-10px;
  -webkit-animation-delay:0;
  animation-delay:0
}
.loader .side:nth-child(3) {
  top:48.2842712474619px;
  left:24.14213562373095px;
  margin-left:-3px;
  margin-top:-10px;
  -webkit-animation-delay:0;
  animation-delay:0
}
.loader .side:nth-child(4) {
  top:41.21320343109277px;
  left:7.07106781636913px;
  margin-left:-3px;
  margin-top:-10px;
  -webkit-animation-delay:0;
  animation-delay:0
}
.loader .side:nth-child(5) {
  top:24.14213562373095px;
  left:0px;
  margin-left:-3px;
  margin-top:-10px;
  -webkit-animation-delay:0;
  animation-delay:0
}
.loader .side:nth-child(6) {
  top:7.07106781636913px;
  left:7.07106781636913px;
  margin-left:-3px;
  margin-top:-10px;
  -webkit-animation-delay:0;
  animation-delay:0
}
.loader .side:nth-child(7) {
  top:0px;
  left:24.14213562373095px;
  margin-left:-3px;
  margin-top:-10px;
  -webkit-animation-delay:0;
  animation-delay:0
}
.loader .side:nth-child(8) {
  top:7.07106781636913px;
  left:41.21320343109277px;
  margin-left:-3px;
  margin-top:-10px;
  -webkit-animation-delay:0;
  animation-delay:0
}
@-webkit-keyframes rotate0 {
  0% {
  transform:rotate(0deg)
}
60% {
  transform:rotate(180deg)
}
100% {
  transform:rotate(180deg)
}
}@keyframes rotate0 {
  0% {
  transform:rotate(0deg)
}
60% {
  transform:rotate(180deg)
}
100% {
  transform:rotate(180deg)
}
}@-webkit-keyframes rotate90 {
  0% {
  transform:rotate(90deg)
}
60% {
  transform:rotate(270deg)
}
100% {
  transform:rotate(270deg)
}
}@keyframes rotate90 {
  0% {
  transform:rotate(90deg)
}
60% {
  transform:rotate(270deg)
}
100% {
  transform:rotate(270deg)
}
}@-webkit-keyframes rotate45 {
  0% {
  transform:rotate(45deg)
}
60% {
  transform:rotate(225deg)
}
100% {
  transform:rotate(225deg)
}
}@keyframes rotate45 {
  0% {
  transform:rotate(45deg)
}
60% {
  transform:rotate(225deg)
}
100% {
  transform:rotate(225deg)
}
}@-webkit-keyframes rotate135 {
  0% {
  transform:rotate(135deg)
}
60% {
  transform:rotate(315deg)
}
100% {
  transform:rotate(315deg)
}
}@keyframes rotate135 {
  0% {
  transform:rotate(135deg)
}
60% {
  transform:rotate(315deg)
}
100% {
  transform:rotate(315deg)
}
}@-webkit-keyframes loader {
  0% {
  transform:rotate(0deg)
}
100% {
  transform:rotate(360deg)
}
}@keyframes loader {
  0% {
  transform:rotate(0deg)
}
100% {
  transform:rotate(360deg)
}
}

html代码：

<div id="loading">
  <div class="loader">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
</div> 

点击查看效果