Necesito un indicador de progreso circular. ¿Cómo debo implementar esto?Indicador de progreso circular con jQuery
Lo que estoy buscando es lo que jQuery UI tiene en su página de planificación, pero aún no está implementado. Solo tengo curiosidad si alguien ha implementado esto antes. Ver el ítem 6 en la imagen siguiente.
http://wiki.jqueryui.com/ProgressIndicator
igual, one of these? No necesitas un complemento para eso. Solo .show() y .hide() un GIF si es necesario (o insértelo en el DOM, lo que sea que flote su bote).
¿Qué está cargando? Un ejemplo básico sería:
Saludos
El href para '# load' debe ser'/path/to/animation.gif' y debe usar 'event.preventDefault()' en '$ ('# load'), haga clic en (...)'. - De esta manera, la página realmente funciona de manera significativa si el usuario tiene JS deshabilitado. –
Entonces, usted dice que si el usuario hace clic en el enlace de carga y ve la animación (el .gif real) si tiene JS deshabilitado, eso es significativo? javascript: void (0) parece funcionar muy bien, incluso en los ejemplos de API de YouTube ... Creo que es mejor no hacer nada que llevar a un gif animado. – Claudiu
No jQuery, pero puede que desee echar un vistazo a la Raphaël biblioteca de Javascript, y en particular, la polar clock example, y el atributo 'arco' personalizado. He usado Raphaël y jQuery para generar algunas barras de progreso circulares estáticas antes, funciona bastante bien.
Gracias @ matt-austin Esta biblioteca se ve muy bien. Voy a intentar implementar un pequeño complemento para hacer una simple animación circular programada con opciones básicas y una devolución de llamada. Voy a publicar una respuesta aquí para el proyecto en github si encuentro el éxito. –
Puede usar jQuery para deslizar la posición de fondo y utilizar o crear la tabla de imágenes de sprites css adecuada para ello.
, por supuesto, necesitaría tener 100 celdas de sprites, y luego tendría que compilar una lista de co-ords de posición de fondo en una matriz/tabla/diccionario multidimensional.
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%
]
Lo siento mi pregunta era tal vez demasiado vaga, pero lo que quería decir era lo jUqery equipo de interfaz de usuario es la planificación: http://wiki.jqueryui.com/ProgressIndicator véase 2 - Diseño visual sexto elemento. Ese tipo de progreso circualr que indica cuántos precesos se completan. – newbie