Je veux créer des points de chargement, comme ça :
A 0000 millisecondes, le contenu de l'espace est : .
A 0100 milisecondes, le contenu de l'espace est : ..
A 0200 milisecondes, le contenu de la travée est : ...
En boucle.
Quelle est la meilleure façon / la plus facile de le faire ?
<span id="wait">.</span>
<script>
var dots = window.setInterval( function() {
var wait = document.getElementById("wait");
if ( wait.innerHTML.length > 3 )
wait.innerHTML = "";
else
wait.innerHTML += ".";
}, 100);
</script>Vous pouvez aussi faire preuve de fantaisie et les faire avancer et reculer :
<span id="wait">.</span>
<script>
window.dotsGoingUp = true;
var dots = window.setInterval( function() {
var wait = document.getElementById("wait");
if ( window.dotsGoingUp )
wait.innerHTML += ".";
else {
wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
if ( wait.innerHTML === "")
window.dotsGoingUp = true;
}
if ( wait.innerHTML.length > 9 )
window.dotsGoingUp = false;
}, 100);
</script>Ou vous pourriez les faire aller et venir de façon aléatoire :
<span id="wait">.</span>
<script type="text/javascript">
var dots = window.setInterval( function() {
var wait = document.getElementById("wait");
if ( Math.random() < .7 )
wait.innerHTML += ".";
else
wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
}, 100);
</script>Ou je pourrais avoir une vie et cesser de poster des extraits supplémentaires..... :D
Comme Ivo l'a dit dans les commentaires, vous devez effacer l'intervalle à un moment donné, surtout si vous ne chargez pas une nouvelle page après la fin de l'attente. :D
Ou vous pouvez le faire avec CSS ;)
<p class="loading">Loading</p>
.loading:after {
content: ' .';
animation: dots 1s steps(5, end) infinite;
}
@keyframes dots {
0%, 20% {
color: rgba(0,0,0,0);
text-shadow:
.25em 0 0 rgba(0,0,0,0),
.5em 0 0 rgba(0,0,0,0);}
40% {
color: white;
text-shadow:
.25em 0 0 rgba(0,0,0,0),
.5em 0 0 rgba(0,0,0,0);}
60% {
text-shadow:
.25em 0 0 white,
.5em 0 0 rgba(0,0,0,0);}
80%, 100% {
text-shadow:
.25em 0 0 white,
.5em 0 0 white;}}
@BabuJames "Quoi" est vieux ? IE8 et autres ? Non, malheureusement pas ! developer.mozilla.org/docs/Web/CSS/animation
Ejemplo: https://codepen.io/lukaszkups/pen/NQjeVN
Vous pouvez animer le css content aussi !
p span:before {
animation: dots 2s linear infinite;
content: '';
}
@keyframes dots {
0%, 20% {
content: '.';
}
40% {
content: '..';
}
60% {
content: '...';
}
90%, 100% {
content: '';
}
}
<p>Loading<span></span></p>
Ejemplo: http://jsfiddle.net/subTZ/
var span = document.getElementById('myspan');
var int = setInterval(function() {
if ((span.innerHTML += '.').length == 4)
span.innerHTML = '';
//clearInterval( int ); // at some point, clear the setInterval
}, 100);
Oui, mais cela crée après un certain temps ................................ une très longue durée. Comment je peux effacer ça après 3 points ?
@Thew : Il suffit de tester le length de la innerHTML à chaque fois, puis utilisez le clearInterval J'ai inclus. Je ne savais pas que tu n'en voulais que 3.
Cette solution est similaire à celle de Veiko Jääger. Avec cette solution, la couleur des points est la même que celle du texte auquel ils sont associés.
<html>
<head>
<style>
.appendMovingDots:after {
content: ' .';
animation: dots 3s steps(1, end) infinite;
}
@keyframes dots {
0%, 12.5% {
opacity: 0;
}
25% {
opacity: 1;
}
37.5% {
text-shadow: .5em 0;
}
50% {
text-shadow: .5em 0, 1em 0;
}
62.5% {
text-shadow: .5em 0, 1em 0, 1.5em 0;
}
75% {
text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0;
}
87.5%, 100%{
text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0, 2.5em;
}
}
</style>
</head>
<body>
<span class="appendMovingDots" style="font-size:20px">This is a test</span>
</body>
</html> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
2 votes
Si vous ajoutez simplement "." toutes les 100 ms au contenu du span, cela ne fonctionne-t-il pas ? span.innerHTML += "." ;
51 votes
J'aime ce titre intuitif.
1 votes
Excellent titre ! !!