it-swarm.com.de

YouTube-ähnlicher Fortschrittsbalken

Ich versuche, eine YouTube-ähnliche Fortschrittsleiste zu erstellen. Die Leiste sollte beim Start der Seite geladen werden. Ich habe das bisher ausprobiert. Hier ist der Code meines Skripts

$({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');
    }
});

Ich füge auch die jsFiddle desselben ein, http://jsfiddle.net/ajaSB/3/ .

In diesem jsfiddle wird die Fortschrittsleiste angezeigt, aber wenn ich denselben Code in meiner IDE verwende und die Datei ausführte, wird keine Fortschrittsleiste angezeigt. Was mache ich falsch? Oder wenn es einen anderen Weg gibt, die Bar zu bekommen?

34
Swagata Barua

Hier ist ein Beispiel für eine vollständige HTML-Seite mit einem Verweis auf die jQuery-Bibliothek.

Obwohl meistens funktionieren wird, sollten Sie Ihren Code in eine $(document).ready(...) einschließen, damit Sie sicher sind, dass alle erforderlichen Ressourcen geladen sind, bevor Sie den Code ausführen.

<!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>

Beachten Sie, dass dies auf Version 2 von jQuery abzielt, die Internet Explorer 8 und frühere Versionen nicht unterstützt. Wenn Sie Unterstützung für alte Internet Explorer-Versionen benötigen, sollten Sie stattdessen jQuery 1.10.2 als Ziel verwenden.

Wenn der Fortschrittsbalken nicht angezeigt wird, Sie jedoch nach vier Sekunden alert("complete") erhalten, wenn die Animation beendet sein soll, ist der Verweis auf das CSS wahrscheinlich falsch (es zeigt nicht auf die richtige Stelle oder den falsch geschriebenen Dateinamen).

18
awe

NProgress.js ist eine sehr coole und einfache Bibliothek. Das Git-Repository ist hier . Es hat eine MIT Lizenz .

28
Arthur Yakovlev

Demo: Fiddle

Versuchen Sie den folgenden Code. Sie müssen diese Datei in Ihrem localhost (lokaler Server) ausführen.

<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>

Oder:

Laden Sie diese Datei einfach auf Ihren Server hoch und führen Sie sie dann aus. Auf jeden Fall funktioniert es.

10
Nathan Srivi

LoadingBar.js: Eine YouTube-Like-Ladeleiste zu Ihrer Website hinzufügen

YouTube hat kürzlich eine rote Ladeleiste am oberen Seitenrand hinzugefügt, um anzuzeigen, dass die nächste Seite geladen wird. Sie fragen sich vielleicht, warum sie sich nicht auf die Ladeleiste des Browsers verlassen. Dies liegt daran, dass die nächste Seite mit Ajax geladen wird, wodurch der normale Mechanismus zum Laden der Seite nicht ausgelöst wird. Aus diesem Grund hat der Browser es nicht erkannt. Wie einige von Ihnen vielleicht wissen, kann das Laden des gesamten Inhalts über Ajax das Laden Ihrer Website beschleunigen.

Dies liegt daran, dass der gesamte statische Inhalt unverändert bleibt und nur der dynamische Inhalt geladen wird. Auf diese Weise müssen Sie den Server nicht ständig nach statischen Inhalten fragen, die sich niemals ändern und eine Überladung verursachen.

DEMO

HERUNTERLADEN 

Erstelle eine YouTube-Like-Ladeleiste für das Web

Wie bereits in einem Blogbeitrag von Dmitry Fadeyev auf UsabilityPost erwähnt, integrieren viele Entwickler dieses UI-Muster mehr und mehr in ihre Websites. Heute habe ich beschlossen, ein jQuery-Plugin zu erstellen, mit dem Sie allen Ajax-Links auf Ihrer Website eine Ladeleiste hinzufügen können. Lass mich dir zeigen, wie es funktioniert.

Grundnutzung

HTML-Auszeichnung

<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) {}
});

CSS-Anpassung

#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;
}

Und das ist es. Sie haben jetzt eine fantastische Ladebalken für alle Ihre Ajax-Anrufe. Ich hoffe es gefällt euch :)

5
HMagdy

Wenn Sie einen "youtube-ähnlichen" Loader für Ihre Anwendung AJAX wünschen, der den legitimen Fortschritt beim Laden von Seiten darstellt, sollten Sie die folgende Lösung in Betracht ziehen (basierend auf der Antwort von Nathan Srivi):

In Ihrer .ajax()-Methode:

$.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' );
      ...
    }

Dann in Ihrem CSS; benutze das:

#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;
}

Und jetzt sollten Sie einen Loader haben, der für jede AJAX -Operation funktioniert ... und wirklich den tatsächlichen Prozentsatz der Antwortmenge darstellt, statt nur beim ersten Laden einer fantastischen Animation abzuspielen Hauptseite.

Um es beim ersten Laden der Seite funktionsfähig zu machen (d. H. Es zeigt nicht den legitimen Fortschritt an), verwenden Sie die Methode, die Nathan Srivi in ​​einer document.ready-Funktion über das bereits erwähnte hinaus erwähnt:

$( 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');
        }
    });
});

Zuletzt,

Sie müssen sicherstellen, dass "Content-Length" -Header an den Browser gesendet werden, damit ein Loader dieses Entwurfs ordnungsgemäß funktioniert ... Andernfalls löst das event.lengthComputable-Member den Wert "false" auf, und es wird keine Fortschrittsleiste geladen.

HTH, zögern Sie nicht, Inkonsistenzen zu bearbeiten.

5
Rik

Code von TalkersCode.com und Tutorial hier 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
1
terry

Sie können das Plugin für die Fortschrittsleiste erhalten
Ich habe es auf GitHub veröffentlicht 

https://github.com/shashibeit/progressbar

sie müssen in Ihr Projekt aufnehmen und die folgenden Funktionen aufrufen 

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

0
Shashikant