एनिमेटेड डॉट्स लोडिंग स्क्रीन

1902 loader7

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

15 October 2025

CSS लोडिंग एनीमेशन HTML संरचना

19 October 2024

एनिमेटेड HTML और CSS इनपुट

23 September 2025

CSS लोडिंग एनीमेशन HTML स्निपेट

HTML

CSS

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

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

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

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

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

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

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

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

अनुशंसित

CSS लोडिंग एनीमेशन HTML संरचना

एनिमेटेड HTML और CSS इनपुट

CSS लोडिंग एनीमेशन HTML स्निपेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS