Animacje ładowania w CSS

W dzisiejszym wpisie pokaże ciekawe skrypty CSS do stworzenia animacji ładowania.

<div class="loading">
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
.loading {
  margin: 4rem;
  display: flex;
  justify-content: center;
  gap: 20px;
}

span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: violet;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

span:nth-child(1) {
  background-color: violet;
  transform: translateX(-25px) translateY(-25px);
  animation-name: triangleRotation1;
}
span:nth-child(2) {
  background-color: slateblue;
  transform: translateX(25px) translateY(-25px);
  animation-name: triangleRotation2;
}
span:nth-child(3) {
  background-color: darkslateblue;
  transform: translateX(-55px) translateY(25px);
  animation-name: triangleRotation3;
}

@keyframes triangleRotation1 {
  33% {
    transform: translateX(65px) translateY(-25px);
  }
  66% {
    transform: translateX(25px) translateY(25px);
  }
  100% {
    transform: translateX(-25px) translateY(-25px);
  }
}
@keyframes triangleRotation2 {
  33% {
    transform: translateX(-15px) translateY(25px);
  }
  66% {
    transform: translateX(-65px) translateY(-25px);
  }
  100% {
    transform: translateX(31px) translateY(-25px);
  }
}
@keyframes triangleRotation3 {
  33% {
    transform: translateX(-105px) translateY(-25px);
  }
  66% {
    transform: translateX(-15px) translateY(-25px);
  }
  100% {
    transform: translateX(-55px) translateY(25px);
  }
}

</style>

---

<div class="loading">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
.loading {
  margin: 2rem;
  display: flex;
  justify-content: center;
  gap: 20px;
}

span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: violet;
  animation-name: colorChanger;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

span:nth-child(1) {
  animation-delay: 0.3s;
}
span:nth-child(2) {
  animation-delay: 0.5s;
}
span:nth-child(3) {
  animation-delay: 0.7s;
}
span:nth-child(4) {
  animation-delay: 1s;
}

@keyframes colorChanger {
  10% {
    background-color: cyan;
  }
  20% {
    background-color: slateblue;
  }
  30% {
    background-color: purple;
  }
  40% {
    background-color: violet;
  }
  50% {
    background-color: #34568b;
  }
  60% {
    background-color: #ff6f61;
  }
  70% {
    background-color: #6b5b95;
  }
  80% {
    background-color: #88b04b;
  }
  90% {
    background-color: #f7cac9;
  }
  100% {
    background-color: #92a8d1;
  }
}
</style>

---

<div class="center">
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
</div>
<style>
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.center {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}
.wave {
  width: 5px;
  height: 100px;
  background: linear-gradient(45deg, cyan, #fff);
  margin: 10px;
  animation: wave 1s linear infinite;
  border-radius: 20px;
}
.wave:nth-child(2) {
  animation-delay: 0.1s;
}
.wave:nth-child(3) {
  animation-delay: 0.2s;
}
.wave:nth-child(4) {
  animation-delay: 0.3s;
}
.wave:nth-child(5) {
  animation-delay: 0.4s;
}
.wave:nth-child(6) {
  animation-delay: 0.5s;
}
.wave:nth-child(7) {
  animation-delay: 0.6s;
}
.wave:nth-child(8) {
  animation-delay: 0.7s;
}
.wave:nth-child(9) {
  animation-delay: 0.8s;
}
.wave:nth-child(10) {
  animation-delay: 0.9s;
}

@keyframes wave {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
</style>

---

<div class="ring">Loading
  <span></span>
</div>
<style>
body
{
  margin:0;
  padding:0;
  background:#262626;
}
.ring
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:150px;
  background:transparent;
  border:3px solid #3c3c3c;
  border-radius:50%;
  text-align:center;
  line-height:150px;
  font-family:sans-serif;
  font-size:20px;
  color:#fff000;
  letter-spacing:4px;
  text-transform:uppercase;
  text-shadow:0 0 10px #fff000;
  box-shadow:0 0 20px rgba(0,0,0,.5);
}
.ring:before
{
  content:'';
  position:absolute;
  top:-3px;
  left:-3px;
  width:100%;
  height:100%;
  border:3px solid transparent;
  border-top:3px solid #fff000;
  border-right:3px solid #fff000;
  border-radius:50%;
  animation:animateC 2s linear infinite;
}
span
{
  display:block;
  position:absolute;
  top:calc(50% - 2px);
  left:50%;
  width:50%;
  height:4px;
  background:transparent;
  transform-origin:left;
  animation:animate 2s linear infinite;
}
span:before
{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff000;
  top:-6px;
  right:-8px;
  box-shadow:0 0 20px #fff000;
}
@keyframes animateC
{
  0%
  {
    transform:rotate(0deg);
  }
  100%
  {
    transform:rotate(360deg);
  }
}
@keyframes animate
{
  0%
  {
    transform:rotate(45deg);
  }
  100%
  {
    transform:rotate(405deg);
  }
}
</style>

Źródła:

• https://dev.to/shubhamtiwari909/css-loading-animationsc-3k8m
• https://blog.hubspot.com/website/css-loading-animation