Indicateur de progression circulaire avec jQuery

Question

J'ai besoin d'un indicateur de progression circulaire. Comment dois-je le mettre en œuvre ?

Ce que je cherche, c'est ce que jQuery UI a dans sa page de planification, mais qui n'est pas encore mis en œuvre. Je suis juste curieux de savoir si quelqu'un l'a déjà mis en œuvre. Voir le point 6 dans l'image suivante.

http://wiki.jqueryui.com/ProgressIndicator

Answer 1

Il semble qu'ils y soient parvenus avec seulement css3 et jquery.

Discussion : http://blakek.us/css3-pie-graph-timer-with-jquery/
Démo : http://blakek.us/labs/jquery/css3-pie-graph-timer/

La réponse vient d'une autre question :

Comment créer un indicateur de progression circulaire (camembert) ?

Answer 2

Comme, un de ces ? Vous n'avez pas besoin d'un plugin pour cela. Il suffit de .show() y .hide() un GIF si nécessaire (ou l'insérer dans le DOM, comme bon vous semble).

Answer 3

Ce n'est pas jQuery, mais vous pouvez jeter un coup d'œil à l'application Raphaël et, en particulier, la bibliothèque exemple d'horloge polaire et l'attribut personnalisé "arc". J'ai déjà utilisé Raphaël et jQuery ensemble pour générer des barres de progression circulaires statiques - cela fonctionne très bien.

Answer 4

Je cherchais la même chose et j'ai fini par prendre l'après-midi pour écrire un plugin jQuery pour cela. Je l'ai appelé "polartimer". Il utilise la bibliothèque SVG Raphael. Il n'est pas très sophistiqué mais il fonctionne dans IE 9, contrairement à la plupart des démos en CSS3 pur que j'ai vues lors de mes recherches.

Polartimer sur github

Démonstration en direct

J'espère que cela aidera quelqu'un. Si cela ne répond pas à vos besoins, essayons de le retravailler.

Answer 5

Vous pourriez utiliser jQuery pour faire glisser la position de l'arrière-plan, et utiliser ou créer la table d'images sprites css appropriée.

bien sûr, il faudrait avoir 100 cellules de sprites, et ensuite compiler une liste de coordonnées de position de l'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%
]