J'ai besoin d'un indicateur de progression circulaire. Comment dois-je mettre cela en œuvre?
Ce que je recherche, c'est ce que jQuery UI a dans sa page de planification, mais ce n'est pas encore implémenté. Je suis simplement curieux de savoir si quelqu'un a déjà implémenté cela. Voir l'article 6 dans l'image suivante.
Comme, l'un d'eux ? Vous n'avez pas besoin d'un plugin pour cela. Juste .show()
et .hide()
un GIF si nécessaire (ou insérez-le dans le DOM, quoi que flotte votre bateau).
Pas jQuery, mais vous voudrez peut-être jeter un œil à la bibliothèque javascript Raphaël , et en particulier le exemple d'horloge polaire , et l'attribut personnalisé 'arc'. J'ai déjà utilisé Raphaël et jQuery pour générer des barres de progression circulaires statiques auparavant - cela fonctionne très bien.
Vous pouvez utiliser jQuery pour faire glisser la position d'arrière-plan et utiliser ou créer la table d'images Sprite CSS appropriée.
bien sûr, vous devez avoir 100 cellules Sprite, puis vous devez compiler une liste de coordonnées de position d'arrière-plan dans un tableau/tableau/dictionnaire multidimensionnel.
progressMeterSpriteCoords = [
{x: 0, y: 0}, //0%
{x: -16, y: 0}, //1%
{x: -32, y: 0}, //2%
... etc etc..
{x: -320, y: -0}, //19%
{x: 0, y: -16}, //20%
{x: -16, y: -16}, //21%
{x: -32, y: -16}, //22%
... etc etc..
{x: -320, y: -16}, //29%
... etc etc..
{x: -320, y: -320} //99%
]
Que chargez-vous? Un exemple de base serait:
<div id="loading"></div>
<a href="javascript:void(0);" id="load">Load!</a>
<script type="text/javascript">
$('#load').click(function(){ // click event on the load link
$('#loading').html('<img src="/path/to/animation.gif" />'); // display a loading animation where the content goes
$.get('/file/to/load.php', function(data) { // request content to be displayed
$('#loading').html(data); // display content
});
});
</script>
À votre santé