css Animation chargement (loading) en css ?

[Hamza]

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 !

 

[yule]

Saluti,

Essaye ça



Bonne bonne
Yule

 

[DaCode]

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 !!

<div class="loading">Chargement en cours</div>

.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]

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.

 

[Anthony]

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.

Quand tu cherches des infos sur le développement web je te suggère de les effectuer en anglais plutôt qu'en français

animated ellipsis css - Recherche Google