Animated Loading Page

Open In Editor Publish Your Code

Animated Loading Page

Recommended

30 September 2025

CSS Loading Animation with Waves and Ripples

13 June 2025

egg toasting loading

21 May 2025

Animated lamp

HTML

CSS

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:#212121;
  overflow:hidden
}
.loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loader div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c517f0;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loader div:nth-child(1) {
  left: 8px;
  animation: flip1 0.6s infinite;
}

.loader div:nth-child(2) {
  left: 8px;
  animation: flip2 0.6s infinite;
}

.loader div:nth-child(3) {
  left: 32px;
  animation: flip2 0.6s infinite;
}

.loader div:nth-child(4) {
  left: 56px;
  animation: flip3 0.6s infinite;
}

@keyframes flip1 {
  0% {
    transform: scale(0);
  }

100% {
    transform: scale(1);
  }
}

@keyframes flip3 {
  0% {
    transform: scale(1);
  }

100% {
    transform: scale(0);
  }
}

@keyframes flip2 {
  0% {
    transform: translate(0, 0);
  }

100% {
    transform: translate(24px, 0);
  }
}

JS