it-swarm.com.de

Wie erstelle ich einen Fortschrittsbalken?

Wie würde man eine Fortschrittsleiste in html/css/javascript erstellen? Ich möchte Flash nicht wirklich verwenden. Etwas in der Richtung dessen, was hier zu finden ist: http://dustincurtis.com/about.html

Alles, was ich wirklich will, ist ein Fortschrittsbalken, der die von mir in PHP angegebenen Werte ändert. Was wäre dein Durchgangsprozess? Gibt es dazu gute Tutorials?

36
john mossel

Sie können dies tun, indem Sie die Breite eines Div über css steuern. Etwas ungefähr in diese Richtung:

<div id="container" style="width:100%; height:50px; border:1px solid black;">
  <div id="progress-bar" style="width:50%;/*change this width */
       background-image:url(someImage.png);
       height:45px;">
  </div>
</div>

Dieser Breitenwert kann von PHP gesendet werden, wenn Sie dies wünschen.

42
Sam Dufel

Wenn Sie HTML5 verwenden, sollten Sie das neu eingeführte <progress>-Tag verwenden.

<progress value="22" max="100"></progress>

Oder erstellen Sie einen eigenen Fortschrittsbalken.

Beispiel in Sencha geschrieben

if (!this.popup) {
            this.popup = new Ext.Panel({
            floating: true,
            modal: false,
            // centered:true,
            style:'background:black;opacity:0.6;margin-top:330px;',
            width: '100%',
            height: '20%',
            styleHtmlContent: true,
            html: '<p align="center" style="color:#FFFFFF;font-size:12px">Downloading Data<hr noshade="noshade"size="7" style="color:#FFFFFF"></p>',

            });
}
this.popup.show('pop');
26
najeeb

http://jqueryui.com/demos/progressbar/

Überprüfen Sie das heraus, es könnte sein, was Sie brauchen.

12
SapphireSun

Sie können progressbar.js; animierte Fortschrittsbalkensteuerung und ein kleines Diagramm (Sparkline) verwenden

Demo und Download Link

enter image description here

HTML-Verwendung;

<div id="my-progressbar"></div>

Javascript-Nutzung;

var progressBar;

window.onload = function(){

    progressBar = new ProgressBar("my-progressbar", {'width':'100%', 'height':'3px'});
    progressBar.setPercent(60);

}
10
bugra ozden

Im Grunde ist es Folgendes: Sie haben drei Dateien: Ihr lang laufendes PHP -Skript, eine Fortschrittsleiste, die von Javascript gesteuert wird ( @SapphireSun gibt eine Option ) und ein Fortschrittsscript. Der schwierige Teil ist das Fortschrittsskript. Ihr Langskript muss in der Lage sein, seinen Fortschritt ohne direkte Kommunikation mit Ihrem Fortschrittsskript zu melden. Dies kann in Form von Sitzungs-IDs erfolgen, die mit Fortschrittsanzeigen, einer Datenbank oder einer Überprüfung der noch nicht abgeschlossenen Daten verknüpft sind.

Der Prozess ist einfach:

  1. Führen Sie Ihr Skript aus und löschen Sie den Fortschrittsbalken
  2. Fragen Sie Ihr Fortschrittsskript mit AJAX ab
  3. Das Fortschrittsskript muss den Fortschritt irgendwie überprüfen
  4. Ändern Sie die Fortschrittsleiste, um den Wert wiederzugeben
  5. Aufräumen, wenn Sie fertig sind
6
TheLQ

Ich habe einen einfachen Fortschrittsbalken ausprobiert. Es ist nicht anklickbar, es wird nur der tatsächliche Prozentsatz angezeigt. Es gibt eine gute Erklärung und Code hier: http://ruwix.com/simple-javascript-html-css-slider-progress-bar/

5
Fricike

Hier ist mein Ansatz, ich habe versucht, ihn schlank zu halten:

HTML:

<div class="noload">
    <span class="loadtext" id="loadspan">50%</span>
    <div class="load" id="loaddiv">
    </div>
</div>

CSS:

.load{    
    width: 50%;
    height: 12px;
    background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv/b9Z9j7Fcha827Df4alr1b9Z1j4YsV/BuML3v8ZTC/7/GcwuwokrG4DCceH/v8Bs2Ef1StO/o0AAAAASUVORK5CYII=);  
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.noload{
    width: 100px;    
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn/zwghCMwGh8Tj+8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi//WKcAAAAASUVORK5CYII=);     
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #999999;    
    position: relative;
}

.loadtext {
    font-family: Consolas;    
    font-size: 11px;
    color: #000000;
    position: absolute;
    bottom: -1px;
}

Geige: hier

enter image description here

4
fubo

Infinitiver Fortschrittsbalken mit reinem Javascript

<div id="container" style="width:100%; height:5px; border:1px solid black;">
  <div id="progress-bar" style="width:10%;background-color: green; height:5px;"></div>
</div>

<script>
  var width = 0;
  window.onload = function(e){ 
    setInterval(function () {
        width = width >= 100 ? 0 : width+5;  
        document.getElementById('progress-bar').style.width = width + '%'; }, 200);            
  }
</script>

Beispiel http://fiddle.jshell.net/1kmum4du/

3
pymen

Ich weiß, dass das folgende derzeit nicht funktioniert, weil Browser es noch nicht unterstützen, aber vielleicht hilft es eines Tages:

Zum Zeitpunkt dieses Beitrags ist attr() auf anderen Eigenschaften als content nur eine Kandidatenempfehlung1. Sobald es implementiert ist, könnte man eine Fortschrittsleiste mit nur einem Element erstellen (wie HTML 5 <progress/>, jedoch mit besseren Stiloptionen und Text).

<div class="bar" data-value="60"></div>

und reines CSS

.bar {
    position: relative;
    width: 250px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #003458;
    color: white;
}

.bar:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    width: attr(data-value %, 0); /* currently not supported */
    content: '';
    background: rgba(255, 255, 255, 0.3);
}

.bar:after {
    content: attr(data-value) "%";
}

Hier ist das aktuell nicht funktionierende Demo .


1 Ich kann mir nicht vorstellen, warum dies in keinem Browser implementiert ist. Zuerst würde ich denken, dass, wenn Sie bereits die Funktionalität für content haben, es nicht zu schwer sein sollte, diese zu erweitern (aber ich weiß natürlich nicht, dass ich ehrlich bin). Zweitens: Das obige ist nur ein gutes Beispiel, das zeigt, wie mächtig diese Funktionalität sein kann. Hoffentlich unterstützen sie es bald, oder es gehört nicht zur endgültigen Spezifikation.

1
Linus Caldwell

Ich habe diese Fortschrittsleiste verwendet. Weitere Informationen hierzu finden Sie unter link d. Anpassung, Kodierung usw.

<script type="text/javascript">

var myProgressBar = null
var timerId = null

function loadProgressBar(){
myProgressBar = new ProgressBar("my_progress_bar_1",{
    borderRadius: 10,
    width: 300,
    height: 20,
    maxValue: 100,
    labelText: "Loaded in {value,0} %",
    orientation: ProgressBar.Orientation.Horizontal,
    direction: ProgressBar.Direction.LeftToRight,
    animationStyle: ProgressBar.AnimationStyle.LeftToRight1,
    animationSpeed: 1.5,
    imageUrl: 'images/v_fg12.png',
    backgroundUrl: 'images/h_bg2.png',
    markerUrl: 'images/marker2.png'
});

timerId = window.setInterval(function() {
    if (myProgressBar.value >= myProgressBar.maxValue)
        myProgressBar.setValue(0);
    else
        myProgressBar.setValue(myProgressBar.value+1);

},
100);
}

loadProgressBar();
</script>

Hoffe, das kann für Somenone hilfreich sein.

1
surhidamatya

Sie können einen Fortschrittsbalken für jedes HTML-Element erstellen, auf das Sie einen Verlauf einstellen können. (Ziemlich cool!) In dem folgenden Beispiel wird der Hintergrund eines HTML-Elements mit einem linearen Verlauf mit JavaScript aktualisiert:

myElement.style.background = "linear-gradient(to right, #57c2c1 " + percentage + "%, #4a4a52 " + percentage + "%)";

PS Ich habe beide Orte percentage gleich gesetzt, um eine harte Linie zu erzeugen. Spielen Sie mit dem Design, Sie können sogar einen Rand hinzufügen, um den klassischen Fortschrittsbalken-Look zu erhalten :)

 enter image description here

https://jsfiddle.net/uoL8j147/1/

1
Bruno
var myPer = 35;
$("#progressbar")
    .progressbar({ value: myPer })
    .children('.ui-progressbar-value')
    .html(myPer.toPrecision(3) + '%')
    .css("display", "block");
1
san

Wenn Sie den Fortschrittsbalken in Ihrem PHP- und Java-Skript anzeigen und ausblenden müssen, führen Sie diesen Schritt aus. Eine vollständige Lösung, keine Bibliothek usw.

           //Design Progress Bar

  <style>
#spinner
{     
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;

height: 200px;


width: 300px;
margin-left: -300px;

    /*Change your loading image here*/
   background: url(images/loading12.gif) 50% 50% no-repeat ;

}
  </style>

               //Progress Bar inside your Page

<div id="spinner" style=" display:none; ">
</div>                                

    // Button to show and Hide Progress Bar
<input class="submit" onClick="Show()" type="button" value="Show" /> 
<input class="submit" onClick="Hide()" type="button" value="Hide" /> 

            //Java Script Function to Handle Button Event     
<script language="javascript" type="text/javascript">
 function Show()
 {       
  document.getElementById("spinner").style.display = 'inline';
 }
function Hide()
 {       
  document.getElementById("spinner").style.display = 'none';
 }

</script>

Bildlink: Bild von hier herunterladen

0
Pir Fahim Shah

Obwohl man mit setInterval eine Fortschrittsanzeige erstellen und deren Breite animieren kann

Für eine optimale Leistung beim Animieren eines Fortschrittsbalkens müssen nur die Eigenschaften des Compositors berücksichtigt und die Anzahl der Ebenen verwaltet werden.

Hier ist ein Beispiel:

function update(e){
  var left = e.currentTarget.offsetLeft;
  var width = e.currentTarget.offsetWidth
  var position = Math.floor((e.pageX - left) / width * 100) + 1;
  var bar = e.currentTarget.querySelector(".progress-bar__bar");
  bar.style.transform = 'translateX(' + position + '%)';
}
body {
  padding: 2em;
}

.progress-bar {
  cursor: pointer;
  margin-bottom: 10px;
  user-select: none;
}

.progress-bar {
  background-color: #669900;
  border-radius: 4px;
  box-shadow: inset 0 0.5em 0.5em rgba(0, 0, 0, 0.05);
  height: 20px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  width: 100%;
}

.progress-bar__bar {
  background-color: #ececec;
  box-shadow: inset 0 0.5em 0.5em rgba(0, 0, 0, 0.05);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 500ms ease-out;
}
Click on progress bar to update value

<div class="progress-bar" onclick="update(event)">
  <div class="progress-bar__bar"></div>
</div>
0
Priyesh Diukar

Sie können setInterval verwenden, um einen Fortschrittsbalken zu erstellen.

function animate() {
  var elem = document.getElementById("bar");   
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}
#progress-bar-wrapper {
  width: 100%;
  background-color: #ddd;
}

#bar {
  width: 1%;
  height: 30px;
  background-color: orange;
}
<div id="progress-bar-wrapper">
  <div id="bar"></div>
</div>

<br>
<button onclick="animate()">Click Me</button>
0
Mithila Gaonkar

Sie können die Fortschrittsleiste mithilfe von CSS3-Animationen neu erstellen, um ein besseres Aussehen zu erzielen.

JSFiddle Demo

HTML

<div class="outer_div">
    <div class="inner_div">
        <div id="percent_count">

    </div>
</div>

CSS/CSS3

.outer_div {
    width: 250px;
    height: 25px;
    background-color: #CCC;
}

.inner_div {
    width: 5px;
    height: 21px;
    position: relative; top: 2px; left: 5px;
    background-color: #81DB92;
    box-shadow: inset 0px 0px 20px #6CC47D;
    -webkit-animation-name: progressBar;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

#percent_count {
    font: normal 1em calibri;
    position: relative;
    left: 10px;
}

@-webkit-keyframes progressBar {
    from {
        width: 5px;
    }
    to {
        width: 200px;
    }
}
0
user2865400

Sie könnten ProgressBar.js verwenden. Keine Abhängigkeiten, einfache API und Unterstützung der wichtigsten Browser. 

var line = new ProgressBar.Line('#container');
line.animate(1);

Weitere Anwendungsbeispiele finden Sie auf der Demo-Seite.

0
Kimmo