28172 sujets
CSS et mise en forme, CSS3
Bonsoir. D'accord, mais qu'est-ce qui déclenche l'événement ? La fin du chargement de la page (.addEventListener + 'load') ? Un bouton (.addEventListener + 'click') ?
Voici un exemple de code que vous n'aurez pas de mal à adapter :
La démo de ce code ici : Progress Bars, test de 0 à 100%.
Modifié par Olivier C (26 Dec 2022 - 22:44)
Voici un exemple de code que vous n'aurez pas de mal à adapter :
const progressBarTest = (() => {
const cmd = document.querySelector('#progress-test-cmd'),
target = document.querySelector('#progress-test-target')
cmd && cmd.addEventListener('click', () => {
let value = target.dataset.value
setInterval(frame, 10)
function frame() {
if (value < 100) {
value++
target.querySelector('div').style.width = value + '%'
}
}
}, false)
})()La démo de ce code ici : Progress Bars, test de 0 à 100%.
Modifié par Olivier C (26 Dec 2022 - 22:44)
Salut,
Merci pour ta réponse. J’ai essayé avec ta méthode ça fonctionne très bien. J’avais pas pensé à faire comme ça.
Je sais pas si c’est possible dans les styles de mettre juste une trait rouge qui avance pas comme j’ai fait où c’est qu’il y a un rectangle qui progresse.
Modifié par SIRIUS_NG (27 Dec 2022 - 13:00)
Merci pour ta réponse. J’ai essayé avec ta méthode ça fonctionne très bien. J’avais pas pensé à faire comme ça.
Je sais pas si c’est possible dans les styles de mettre juste une trait rouge qui avance pas comme j’ai fait où c’est qu’il y a un rectangle qui progresse.
Modifié par SIRIUS_NG (27 Dec 2022 - 13:00)
SIRIUS_NG a écrit :
Je sais pas si c’est possible dans les styles de mettre juste une trait rouge qui avance pas comme j’ai fait où c’est qu’il y a un rectangle qui progresse.
Je ne suis pas sûr d'avoir tout compris... S'il s'agit de rajouter un triangle (c'est bien ça ?) on peut le faire avec un pseudo élément.
Le trait horizontal ? Si oui, on peut utiliser approximativement le même script JS, mais cette fois-ci sur un élément pour lequel on ferait varier non pas les marges mais la largeur (width).
C'est l'une des possibilités mais il faut savoir qu'il y en a d'autres, comme par exemple utiliser un effet de gradients en background pour lequel les points d'arrêts, déterminés avec des variables CSS, seraient pilotés en javascript. Je le fais ici par exemple : voir la barre active entre deux curseurs de .range-multithumb. Mais c'est peut-être un peu beaucoup pousser le bouchon pour un apprentissage, ça fait beaucoup de concepts à maîtriser à la fois pour un intérêt qui est loin d'être évident dans le cas qui nous occupe, je conseille donc plutôt la première solution proposée.
Modifié par Olivier C (27 Dec 2022 - 16:49)
C'est l'une des possibilités mais il faut savoir qu'il y en a d'autres, comme par exemple utiliser un effet de gradients en background pour lequel les points d'arrêts, déterminés avec des variables CSS, seraient pilotés en javascript. Je le fais ici par exemple : voir la barre active entre deux curseurs de .range-multithumb. Mais c'est peut-être un peu beaucoup pousser le bouchon pour un apprentissage, ça fait beaucoup de concepts à maîtriser à la fois pour un intérêt qui est loin d'être évident dans le cas qui nous occupe, je conseille donc plutôt la première solution proposée.
Modifié par Olivier C (27 Dec 2022 - 16:49)