Progress Bar Füllung - jQuery Implementierung

Question

Ich bin meine eigene Progress Bar mit jQuery implementieren. Meine Frage ist, wie kann ich (zum Beispiel) nur 30% davon mit einem Hintergrund füllen? Was sind meine Optionen? Grundsätzlich ist die Progress Bar eine einfache div mit abgerundeten Ecken (-moz-border-Radius). Ich benutze Firefox 3.6.3.

[Update] Ich versuchte this Beispiel. Wie wird die rechte Seite der gefüllten Fläche nicht wie im dritten Beispiel gerundet? Das vierte Beispiel ist jedoch problematisch ... Wie würdest du das lösen?

Dank!

Answer 1

Sie nicht wissen, was Sie den Fortschrittsbalken zu animieren verwenden, aber wenn man den Radius ändern kann als nähert sich das Ende können Sie einen reibungslosen Übergang bekommen.

$('#inner4') 
    .css('width',25) 
    .css('-moz-border-radius-topright','0') 
    .css('-moz-border-radius-bottomright','0') 
    .animate(
     { 
     width:425 
     }, 
     3000, 'linear', 
     function() { 
      $('#inner4').animate({ 
      width:450, 
      '-moz-border-radius-bottomright':'+=25', 
      '-moz-border-radius-topright':'+=25' 
      }, 
      200,'linear', 
      function() {} 
     );//end inner animate 
     } 
    );//end animate 

Here's an example

Answer 2

Eine einfache Option ist eine Hintergrundfarbe, stellen Sie sicher, dass die äußere Containerbreite festgelegt ist und legen Sie dann einfach die innere div's Breite auf einen Prozentsatz fest, der dem Fortschritt entspricht.

Answer 3

Sie 2 divs verwenden können, ein in der anderen, auf dem inner man den Hintergrund stellen und legen Sie es mit einem%, so etwas wie diese Breite ist:

<div style=""> 
    <div style="background: red; width: 50%">&nbsp;</div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Answer 4

Sie ein div und ein Bild verwenden könnten, wie ich zuvor in einem Kommentar erwähnt habe. Hier ist ein Weg, wie Sie es tun können. (Nicht vollständig getestet, so kann es brechen.)

HTML:

<div id="progressBar"></div> 

CSS:

#progressBar { 
    width: 200px; 
    height: 20px; 
    background: url('http://o.imm.io/x9E.jpg') no-repeat; 
    background-position: -200px 0px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
} 

JS:

function setProgress(target,value) { 

    var oldPosition = $(target).css("backgroundPosition"); 

    // Log the old position 
    console.log("Old position: " + oldPosition); 
    var newPosition = parseInt(oldPosition) + parseInt(value); 

    // Log the new position 
    console.log("New position: " + newPosition); 
    $(target).animate({backgroundPosition: newPosition + 'px 0px'}) 
} 

bearbeiten: Ich habe die gerundete Ecken und es funktioniert genau wie Sie angegeben haben, keine Probleme mit den abgerundeten Ecken.

Bearbeiten 2: Überprüfen Sie die JSBin Version dieses Codes.

Edit 3: Wie der OP sagte, brauchten sie die Fortschrittsleiste flexibel zu bemessen. Diese Implementierung wird das nicht tun. Ich werde (wie ich früher) die Verwendung der empfehlen. Es ist einfach zu bedienen und ziemlich leicht.

bearbeiten 4: Ich habe mit einer anderen Implementierung dieses kommen, die ein bisschen mehr benötigt Javascript, aber Sie können es hier testen: http://jsfiddle.net/ntnz4/7/

Answer 5

ich getan habe, was Sie tun für ein paar meiner Seiten, hier ist was ich getan habe:

ich einige grundlegende Markup zuerst tat

<div id="progressBar"> 
    <div id="progressBarInner"></div> 
</div> 

Und die CSS:

#progressBar { 
    width: 200px; 
    height: 20px; 
} 

#progressBarInner { 
    background: url('path/to/your/progress/image.jpg'); 
    width: 100%; 
    height: 100%; 
} 

Wenn das gemacht wird, ist das Einstellen des Fortschritts eigentlich sehr einfach. Unabhängig davon, welcher Fortschritt in der Fortschrittsanzeige angezeigt werden soll, legen Sie die Breite des Elements #ProgressBarInner fest.Zum Beispiel, wenn Sie 32% zeigen wollen, dann würden Sie diesen Satz:

width: 32%

für die progressBarInner div.

Ich weiß nicht, wie dies mit jQuery aus dem Kopf geht, aber ich weiß in der Tat, dass Sie CSS-Eigenschaften verwenden können, so dass dies durchaus möglich ist.

Answer 6

HTML:

<div class="progress"><div style="width:30%"></div></div> 

CSS:

.progress { 
    width: 300px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.progress div { 
    background: url(background.png); 
    height: 10px; 
    -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; 
    -webkit-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; 
} 

Answer 7

Ich bin ein wenig verwirrt, was Sie wollen in Bezug auf den abgerundeten Ecken auf dem gefüllten Farbe zu tun! Aber wenn es gerade und nicht gerundet werden soll, setze einfach das Wrapper div mit css overflow: hidden;

Damit wird das innere div den ganzen Weg bis zu 100% und beim Passieren der abgerundeten Bereich wird einen kühlen Effekt zu schaffen!