Écran de chargement des points animés

Ouvrir dans l'éditeur Publiez votre code

Recommandé

2 June 2025

Un code par youssefdahroug2005

5 December 2024

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);
  }
}

Écran de chargement des points animés

Recommandé

Un code par youssefdahroug2005

Un code par logicalcode2

Page de connexion

HTML

CSS

JS

Recommandé

Un code par youssefdahroug2005

Un code par logicalcode2

Page de connexion

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS