web-dev-qa-db-fra.com

Barre de progression de type YouTube

J'essaie de créer une barre de progression semblable à celle de YouTube. La barre devrait se charger au démarrage de la page. J'ai essayé cela jusqu'à présent. Voici le code de mon script

$({property: 0}).animate({property: 105}, {
    duration: 4000,
    step: function() {
        var _percent = Math.round(this.property);
        $('#progress').css('width',  _percent+"%");
        if(_percent == 105) {
            $("#progress").addClass("done");
        }
    },
    complete: function() {
        alert('complete');
    }
});

J'inclus également le jsFiddle of the same, http://jsfiddle.net/ajaSB/3/ .

Dans ce jsfiddle, la barre de progression apparaît, mais lorsque j'utilise le même code dans mon IDE et exécute le fichier, aucune barre de progression ne s'affiche. Qu'est-ce que je fais mal? Ou s'il y a un autre moyen d'obtenir le bar?

jqueryyoutubeprogress-bar
34
Swagata Barua

Voici un exemple de page HTML complète incluant une référence à la bibliothèque jQuery.

Bien que la plupart du temps fonctionne sans, vous devez envelopper votre code dans une $(document).ready(...) afin de vous assurer que toutes les ressources requises sont chargées avant d'exécuter le code.

<!DOCTYPE html>
<html>
  <head>
  <title>Progress Test</title>

  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $({property: 0}).animate({property: 105}, {
        duration: 4000,
        step: function() {
          var _percent = Math.round(this.property);
          $("#progress").css("width",  _percent+"%");
          if(_percent == 105) {
            $("#progress").addClass("done");
          }
        },
        complete: function() {
          alert("complete");
        }
      });
    });
  </script>

  <link href="css/progressbar.css" rel="stylesheet" type="text/css" />

  </head>
  <body>
    <div id="progress" class="waiting">
  </body>
</html>

Notez que cela cible la version 2 de jQuery, qui ne prend pas en charge Internet Explorer 8 et les versions antérieures. Si vous avez besoin d’une assistance pour les anciennes versions d’Internet Explorer, vous devez plutôt cibler jQuery 1.10.2.

Si la barre de progression ne s'affiche pas, mais que vous obtenez la alert("complete") au bout de quatre secondes lorsque l'animation doit être terminée, il est probable que votre référence au CSS soit incorrecte (ne pointant pas au bon endroit ou mal orthographié).

18
awe

NProgress.js est une bibliothèque très cool et simple. Le référentiel Git est ici . Il possède une licence MIT .

28
Arthur Yakovlev

Démo: Fiddle

Essayez le code suivant. Vous devez exécuter ce fichier sur votre hôte local (serveur local).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        $({property: 0}).animate({property: 105}, {
            duration: 4000,
            step: function() {
                var _percent = Math.round(this.property);
                $('#progress').css('width',  _percent+"%");
                if(_percent == 105) {
                    $("#progress").addClass("done");
                }
            },
            complete: function() {
                alert('complete');
            }
        });
    });
</script>
<style>
    #progress {
        position: fixed;
        z-index: 2147483647;
        top: 0;
        left: -6px;
        width: 0%;
        height: 2px;
        background: #b91f1f;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        -moz-transition: width 500ms ease-out,opacity 400ms linear;
        -ms-transition: width 500ms ease-out,opacity 400ms linear;
        -o-transition: width 500ms ease-out,opacity 400ms linear;
        -webkit-transition: width 500ms ease-out,opacity 400ms linear;
        transition: width 500ms ease-out,opacity 400ms linear
    }
    #progress.done {
        opacity: 0
    }
    #progress dd,#progress dt {
        position: absolute;
        top: 0;
        height: 2px;
        -moz-box-shadow: #b91f1f 1px 0 6px 1px;
        -ms-box-shadow: #b91f1f 1px 0 6px 1px;
        -webkit-box-shadow: #b91f1f 1px 0 6px 1px;
        box-shadow: #b91f1f 1px 0 6px 1px;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%
    }
    #progress dd {
        opacity: 1;
        width: 20px;
        right: 0;
        clip: rect(-6px,22px,14px,10px)
    }
    #progress dt {
        opacity: 1;
        width: 180px;
        right: -80px;
        clip: rect(-6px,90px,14px,-6px)
    }
    @-moz-keyframes Pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-ms-keyframes Pulse {
        30% {
            opacity: .6
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: .6
        }
    }
    @-o-keyframes Pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-webkit-keyframes Pulse {
        30% {
            opacity: .6
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: .6
        }
    }
    @keyframes Pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    #progress.waiting dd,#progress.waiting dt {
        -moz-animation: Pulse 2s ease-out 0s infinite;
        -ms-animation: Pulse 2s ease-out 0s infinite;
        -o-animation: Pulse 2s ease-out 0s infinite;
        -webkit-animation: Pulse 2s ease-out 0s infinite;
        animation: Pulse 2s ease-out 0s infinite
    }
</style>
<div id="progress" class="waiting">
    <dt></dt>
    <dd></dd>
</div>

Ou:

Téléchargez simplement ce fichier sur votre serveur, puis exécutez le fichier. Certainement ça marche.

10
Nathan Srivi

LoadingBar.js: ajout d'une barre de chargement semblable à YouTube à votre site Web

YouTube a récemment ajouté une barre de chargement rouge en haut de la page pour indiquer que la page suivante est en cours de chargement. Vous vous demandez peut-être pourquoi ils ne se sont pas appuyés sur la barre de chargement du navigateur. C’est parce que la page suivante est chargée avec Ajax, ce qui ne déclenche pas le mécanisme de chargement de page normal. C’est pourquoi le navigateur ne l’a pas détecté. Comme certains d'entre vous le savent peut-être, charger l'intégralité du contenu via Ajax peut rendre le chargement de votre site Web plus rapide que la normale.

C’est parce que tout le contenu statique reste inchangé et que seul le contenu dynamique est en cours de chargement. De cette manière, vous n’avez pas besoin de demander au serveur un contenu statique qui ne changera jamais, créant ainsi une surcharge.

D&EACUTE;MO

T&EACUTE;L&EACUTE;CHARGER 

Créer une barre de chargement de type YouTube pour le Web

Comme mentionné dans un billet de blog de Dmitry Fadeyev sur ErgopapPost, de nombreux développeurs intègrent de plus en plus ce modèle d'interface utilisateur à leurs sites Web. Aujourd'hui, j'ai décidé de construire un plugin jQuery qui vous permettra d'ajouter une barre de chargement aux liens Ajax de votre site Web. Laissez-moi vous montrer comment ça marche.

Utilisation de base

Balise HTML

<a href="<<URL>>" class="ajax-call">..</a>
<div id="loadingbar-frame"></div>

JavaScript

$(".ajax-call").loadingbar({
  target: "#loadingbar-frame",
  replaceURL: false,
  direction: "right",

  /* Default Ajax parameters.  */
  async: true, 
  complete: function(xhr, text) {},
  cache: true,
  error: function(xhr, text, e) {},
  global: true,
  headers: {},
  statusCode: {},
  success: function(data, text, xhr) {},
  dataType: "html",
  done: function(data) {}
});

Personnalisation CSS

#loadingbar {
    background: YOUR COLOR;
}

#loadingbar dd, #loadingbar dt {
  -moz-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -ms-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -webkit-box-shadow: YOUR COLOR 1px 0 6px 1px;
  box-shadow: YOUR COLOR 1px 0 6px 1px;
}

Et c'est tout. Vous aurez maintenant une barre de chargement impressionnante pour tous vos appels Ajax. J'espère que tu apprécie cela :)

5
HMagdy

Si vous voulez un chargeur de type "youtube" pour votre application AJAX qui représente réellement une progression de chargement de page légitime, considérez la solution suivante (basée sur la réponse de Nathan Srivi):

Dans votre méthode .ajax():

$.ajax 
( 
  { 
...
    xhr: function() 
    { 
      var xhr = new window.XMLHttpRequest();

      //Upload progress
      xhr.upload.addEventListener
      (
        "progress",
        function( event)
        {
          if( event.lengthComputable )
          {
            var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );

            // Do something with upload progress
            $( '#progress' ).css( { 'width':  percentComplete + '%' } );

            if( percentComplete == 100 )
            {
              $( '#progress' ).addClass( 'finished' );
              $( '#progress' ).delay( 500 ).queue
              (
                'fx',
                function( next )
                {
                  $( '#progress' ).addClass( 'notransition' );
                  $( this ).css( { width: '' } );
                  $( this ).removeClass( 'finished' );
                  next();
                }
              );
            }
          }
        },
        false
      );

      //Download progress
      xhr.addEventListener
      (
        "progress",
        function( event )
        {
          if( event.lengthComputable )
          {
            var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );

            // Do something with upload progress
            $( '#progress' ).css( { 'width':  percentComplete + '%' } );

            if( percentComplete == 100 )
            {
              $( '#progress' ).addClass( 'finished' );
              $( '#progress' ).delay( 500 ).queue
              (
                'fx',
                function( next )
                {
                  $( '#progress' ).addClass( 'notransition' );
                  $( this ).css( { width: '' } );
                  $( this ).removeClass( 'finished' );
                  next();
                }
              );
            }
          }
        },
        false
      );

      return xhr;
    },
...
    success: function( data, textStatus, xhr )
    {
      ...
      // Reset our ajax loading progress bar
      $( '#progress' ).removeClass( 'notransition' );
      ...
    }

Ensuite, dans votre css; utilisez ceci:

#progress {
  position: fixed;
  opacity: 1;
  z-index: 2147483647;
  top: 0;
  left: -6px;
  width: 0%;
  height: 2px;
  background: #b91f1f;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  -moz-transition: width 500ms ease-out,opacity 400ms linear;
  -ms-transition: width 500ms ease-out,opacity 400ms linear;
  -o-transition: width 500ms ease-out,opacity 400ms linear;
  -webkit-transition: width 500ms ease-out,opacity 400ms linear;
  transition: width 500ms ease-out,opacity 400ms linear;
}
#progress.finished {
  opacity: 0 !important;
}
#progress.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

#progress dd,#progress dt {
  position: absolute;
  top: 0;
  height: 2px;
  -moz-box-shadow: #b91f1f 1px 0 6px 1px;
  -ms-box-shadow: #b91f1f 1px 0 6px 1px;
  -webkit-box-shadow: #b91f1f 1px 0 6px 1px;
  box-shadow: #b91f1f 1px 0 6px 1px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
#progress dd {
  opacity: 1;
  width: 20px;
  right: 0;
  clip: rect(-6px,22px,14px,10px); 
}
#progress dt {
  opacity: 1;
  width: 180px;
  right: -80px;
  clip: rect(-6px,90px,14px,-6px);
}
@-moz-keyframes Pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@-ms-keyframes Pulse {
  30% {
    opacity: .6
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: .6
  }
}
@-o-keyframes Pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@-webkit-keyframes Pulse {
  30% {
    opacity: .6
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: .6
  }
}
@keyframes Pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
#progress.waiting dd,#progress.waiting dt {
  -moz-animation: Pulse 2s ease-out 0s infinite;
  -ms-animation: Pulse 2s ease-out 0s infinite;
  -o-animation: Pulse 2s ease-out 0s infinite;
  -webkit-animation: Pulse 2s ease-out 0s infinite;
  animation: Pulse 2s ease-out 0s infinite
}
#progress.notransition dd,#progress.notransition dt {
  -moz-animation: none !important;
  -ms-animation: none !important;
  -o-animation:  none !important;
  -webkit-animation:  none !important;
  animation:  none !important;
}

Et maintenant, vous devriez avoir un chargeur qui fonctionne pour chaque opération AJAX ... et qui fonctionne vraiment pour représenter le pourcentage réel de la quantité de réponse reçue, au lieu de jouer simplement une animation de fantaisie lors du chargement initial du fichier. page d'accueil.

Pour le rendre opérationnel lors du chargement initial de la page (c’est-à-dire qu’il n’affiche pas réellement de progrès légitime), utilisez la méthode que Nathan Srivi mentionne dans une fonction document.ready au-dessus et au-delà de ce que j'ai déjà mentionné:

$( document ).ready(function() {
    $({property: 0}).animate({property: 105}, {
        duration: 4000,
        step: function() {
            var _percent = Math.round(this.property);
            $('#progress').css('width',  _percent+"%");
            if(_percent == 105) {
                $("#progress").addClass("done");
            }
        },
        complete: function() {
            alert('complete');
        }
    });
});

Enfin,

Vous devrez vous assurer que les en-têtes 'Content-Length' sont envoyés au navigateur afin qu'un chargeur de cette conception fonctionne correctement ... sinon, le membre event.lengthComputable devient faux ... et aucune barre de progression ne se chargera.

HTH, n'hésitez pas à éditer des incohérences.

5
Rik

Code de TalkersCode.com et tutoriel ici http://talkerscode.com/webtricks/display-progress-bar-while-page-loads-using-jquery.php

function check_element(ele)
{
 var all = document.getElementsByTagName("*");
 var totalele=all.length;
 var per_inc=100/all.length;

 if($(ele).on())
 {
  var prog_width=per_inc+Number(document.getElementById("progress_width").value);
  document.getElementById("progress_width").value=prog_width;
  $("#bar1").animate({width:prog_width+"%"},10,function(){
  if(document.getElementById("bar1").style.width=="100%")
  {
    $(".progress").fadeOut("slow");
  }         
  });
 }

 else   
 {
  set_ele(ele);
 }
}
1
naresh

Une démonstration de chargement d'image par Nprogress peut aider.

1
terry

Vous pouvez obtenir le plugin pour la barre de progression
Je l'ai publié sur GitHub 

https://github.com/shashibeit/progressbar

vous devrez inclure dans votre projet et appeler les fonctions ci-dessous 

Progress.start();Progress.go(20);Progress.go(30);Progress.go(80);Progress.go(100);Progress.complete();

0
Shashikant