Progress Bar Plugin, une barre de chargement en javascript

Voici le script jquery du jour !

Progress Bar Plugin va vous permettre d'afficher et de faire progresser une barre de chargement !

Mise en place:

  • Comme d'habitude, on commence par inclure le framework jquery
    <script type='text/javascript' src='jquery.js'></script>
  • Ensuite on intègre le plugin Progress Bar
    <script type='text/javascript' src='jqueryprogressbar.js'></script>
  • On inclus le css lié
    /* progress bar container */
    #progressbar{
        border:1px solid black;
        width:200px;
        height:20px;
        position:relative;
        color:black;
    }
    /* color bar */
    #progressbar div.progress{
        position:absolute;
        width:0;
        height:100%;
        overflow:hidden;
        background-color:#369;
    }
    /* text on bar */
    #progressbar div.progress .text{
        position:absolute;
        text-align:center;
        color:white;
    }
    /* text off bar */
    #progressbar div.text{
        position:absolute;
        width:100%;
        height:100%;
        text-align:center;
    }
  • on appel notre barre, ici elle s'affichera remplie à 50%. A vous d'adaptez selon vos besoins !
    $("#progressbar").reportprogress(50);
  • Et évidement incluez une div vide avec la bonne id
    <div id="progressbar"></div>

Voir la démo

-----

Articles relatifs

  • Arkan

    En tout cas la nouvelle mouture de JQuery qui arrive semble très alléchante 🙂
    http://jquery.com/blog/2007/08/24/jquery-114-faster-more-tests-ready-for-12/

    C’est assez fou de voir les temps de réponses pour FF2, y’a de l’amélioration a ce niveau 😉

  • k-ny

    Ah oui j’ai lu la nouvelle ce matin, vraiment je ne suis pas près de lacher jquery moi 😀

  • x@v

    par contre pour la mettre quand une image est fini de charger, comment peux t-ont faire ?
    Merci