This is the 22nd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Rotate circles to load effect

You can copy the code below to see for yourself


<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
</head>
<style>
  .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.8 s 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); }}</style>
<body>
  <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>
</body>
</html>

Copy the code

Fill load rotation effect

You can copy the following code to see for yourself,

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
</head>
<style>
  .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%; }}</style>
<body>
  <span class="loading">
    <span class="loading-inner"></span>
  </span>
</body>
</html>
Copy the code

Sound wave loading effect

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
</head>
<style>
  .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.5 s 1.4 s infinite linear;
}
.loader span:nth-child(2) {
  animation: load 2.5 s 1.2 s infinite linear;
}
.loader span:nth-child(3) {
  animation: load 2.5 s 1s infinite linear;
}
.loader span:nth-child(4) {
  animation: load 2.5 s 0.8 s infinite linear;
}
.loader span:nth-child(5) {
  animation: load 2.5 s 0.6 s infinite linear;
}
.loader span:nth-child(6) {
  animation: load 2.5 s 0.4 s infinite linear;
}
.loader span:nth-child(7) {
  animation: load 2.5 s 0.2 s infinite linear;
}
.loader span:nth-child(8) {
  animation: load 2.5 s 0s infinite linear;
}
.loader span:nth-child(9) {
  animation: load 2.5 s 0.2 s infinite linear;
}
.loader span:nth-child(10) {
  animation: load 2.5 s 0.4 s infinite linear;
}
.loader span:nth-child(11) {
  animation: load 2.5 s 0.6 s infinite linear;
}
.loader span:nth-child(12) {
  animation: load 2.5 s 0.8 s infinite linear;
}
.loader span:nth-child(13) {
  animation: load 2.5 s 1s infinite linear;
}
.loader span:nth-child(14) {
  animation: load 2.5 s 1.2 s infinite linear;
}
.loader span:nth-child(15) {
  animation: load 2.5 s 1.4 s infinite linear;
}
@keyframes load {
  0% {
    background: # 531430;
    transform: scaleY(0.08);
  }
  50% {
    background: #e04960;
        
   transform: scaleY(1);
  }
  100% {
    background: # 531430;    
    transform: scaleY(0.08); }}</style>
<body>
  <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>

</body>
</html>
Copy the code