web-dev-qa-db-fra.com

Indicateur de progression circulaire avec jQuery

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.

alt text

http://wiki.jqueryui.com/ProgressIndicator

jqueryprogress-bar
31
newbie

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

11
mpen

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.

4
Matt Austin

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%
]
2
airtonix

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é

1
Claudiu