css Animation chargement (loading) en css ?

Hamza

Membre
Hello,

Sur un site je voudrais donner la possibilité de charger des fichiers. Lorsque ceux-ci sont un peu lourd cela prend un peu de temps et j'aimerais qu'il y ait une petite animation qui montre que la page n'est pas figée et que le chargement s'effectue bien.

Il y a un texte qui s'affiche actuellement : Chargement de votre fichier et j'airais aimé trois points de suspension animés à la suite.
J'ai trouvé quelques scripts javascript pour effectuer ça mais j'aimerais essayer de le faire en CSS uniquement, je n'ai pas trouvé grand chose de concluant.
Merci pour vos conseils !
 
  Solution
Sinon il y a le toujours fameux Ellipsis qui tourne un peu partout sur les forums et blogs de dev.
D'ailleurs Hamza comment as-tu effectué ta recherche pour ne rien trouver de concluant ? G**gle foisonne d'exemples !!

HTML
<div class="loading">Chargement en cours</div>
CSS
.loading {
  font-size: 30px;
}

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;    
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;  
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;  
  }...

DaCode

Membre
Sinon il y a le toujours fameux Ellipsis qui tourne un peu partout sur les forums et blogs de dev.
D'ailleurs Hamza comment as-tu effectué ta recherche pour ne rien trouver de concluant ? G**gle foisonne d'exemples !!

HTML
<div class="loading">Chargement en cours</div>
CSS
.loading {
  font-size: 30px;
}

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;    
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;  
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;  
  }
}
 

Hamza

Membre
Merci à tous les deux,
yule les exemples sont très bien, à la base je voulais vraiment 3 points de suspensions ... disons les points "classiques" d'un clavier mais c'est vrai qu'il y a d'autres solutions à envisager.
D'ailleurs @Hamza comment as-tu effectué ta recherche pour ne rien trouver de concluant ? G**gle foisonne d'exemples !!
Et bien je ne dois pas avoir choisi les bons mots-clés de recherche car je n'avais rien de trouvé qui m'intéressait.
Ton exemple est exactement ce que je cherchais.
 

Ces discussions pourraient vous intéresser...

  • Résolue
Salut, J'ai une erreur PHP que je n'arrive pas à résoudre, voici le code simplifié <!DOCTYPE html> <html> <head> <title>Cours PHP & MySQL</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Titre</h1>...
  • Résolue
Bonjour, Une question pour la mise à jour de Bootstrap quand une nouvelle version sort. Comment vous procédez ? J'utilise les CDN de bootstrap donc je me demandais ce que je devrais faire avant de les changer pour la nouvelle version ? Comment savoir ce qui va changer sur mon site internet ...
  • Résolue
Hey tout le monde ! Je viens de m'inscrire et me voilà avec ma première question : Comment faire un effet de clic "genre physique" sur un bouton en CSS ? Avec hover j'arrive à faire un petit effet de surélévation mais là c'est le contraire que je voudrais, comme si on appuyait physiquement sur...
Haut