Emilio | Consultor SEO
  • Inicio
  • Autor
  • Consultor SEO
  • Licencia
  • Contactar
  • RSS
Sígueme en Twitter

Progress Bar con javascript

Javascript, octubre, 22 2007 | 1 Comentario

Simple Javascript Progress Bar with CSS es una biblioteca en Javascript para implementar con CSS barras de progreso en páginas web. Es una solución ideal para evitar en estos casos el uso de Flash.

Este recurso permite mostrar una barra de porcentaje usando solo 2 imágenes por medio de CSS y además con un poco de Javascript, hacer que sea más interactiva.

Requiere Prototype Framework y es distribuida con licencia Creative Commons.

javascript-progress-bar

Fuente: Pixelco

Artículos relacionados

  • Consejos para programar correctamente Javascript
  • Añade efectos a tus fotografías con Instant.js
  • Recursos para Javascript
  • Colección de datagrids en Ajax
  • Otro selector de colores con javascript
  • Compresor de código javascript, php, .net y otros


Comentarios en Progress Bar con javascript

Hay 1 Comentario en el artículo Progress Bar con javascript, ¿a qué esperas para dar tu opinión?


  1. ScriptShow dice:
    septiembre 20, 2008 a las 1:18 pm

    Una barra de 2Kb. aprox. con JavaScript y un DIV que contiene los SPAN con dos espacios en blanco cada uno (indicadores de progreso). Es una adaptación que hice unos meses atrás.

    La parte del DIV y los SPAN.

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

    La parte del Script.

    var progressEnd = 25;
    var progressColor = ‘#4A4A4A’;
    var progressInterval = 80;

    var progressAt = progressEnd;
    var progressTimer;
    function progress_clear() {
    for (var i = 1; i progressEnd) progress_clear();
    else document.getElementById(‘progress’+progressAt).style.backgroundColor = progressColor;
    progressTimer = setTimeout(‘progress_update()’,progressInterval);
    }
    function progress_stop() {
    clearTimeout(progressTimer);
    progress_clear();
    }
    progress_update();

    Algunos enlaces relacionados:

    http://scriptasylum.com/backpage.html

    http://scriptasylum.com/miscpage.html

    Otros, por no discriminar mucho:

    http://www.ribosomatic.com/articulos/barras-de-progreso-con-jquery-javascript-css-y-photoshop/

    Personalmente utilizo barras que sean configurables, flexibles, rápidas; que justifiquen la altrnativa a una imagen. Por tanto, huyo de códigos sofisticados y de gran tamaño.
    Otro quebradero de “cabeza” es la olvidada compatibilidad, y no me refiero a los nuevos navegadores.

    Por otro lado:
    Mootols, Prototype, Jquery, y otros desarrollos similares, están muy bien, pero el tamaño de sus Scripts, me refiero en general, no lo veo justificado. Después de más de diez años visitando millones de páginas (sin comillas), en busca de código perfecto, me quedo con un centenar – y son muchas – que he ido encontrando, en ocasiones, por casualidad. Tengo que revisar los enlaces, y retomar el tema para “regocijo”, si es que no las han convertido a – FLASH (películas para espectadores pasivos) – donde se participa poco, nada quizás?. En fin, volvamos a lo que hacemos y/o disfrutamos; y, dejemos un rato, las máquinas de generar código, que, segúramente, aportan poco a la autonomía individual.

    Responder

Deja un comentario

Clic para cancelar respuesta.

Tweet


Amigos

  • Marketing en Internet
  • Diseño web
  • Frases
  • Sinplan

Blog de Emilio, © 2006 - 2012 (Consultor SEO/SMM/SEM Freelance)

» Progress Bar con javascript