Ich implementiere meinen eigenen Progress Bar mit jQuery.
Meine Frage ist, wie kann ich zB nur 30% davon mit einem Hintergrund füllen?
Was sind meine Möglichkeiten?
Grundsätzlich ist die Progress Bar eine einfache div mit abgerundeten Ecken (-moz-border-radius).
Ich benutze Firefox 3.6.3.
[Aktualisierung] Ich habe versucht, dieses Beispiel. Wie kann man die rechte Seite der gefüllten Fläche nicht wie im dritten Beispiel rund machen? Das vierte Beispiel ist jedoch problematisch ... Wie würden Sie das lösen?
Danke!
Eine einfache Option ist eine Hintergrundfarbe, stellen Sie sicher, dass die äußere Containerbreite festgelegt ist und legen Sie dann die Breite des inneren Bereichs auf einen Prozentsatz fest, der dem Fortschritt entspricht.
Sie können ein div und ein Bild verwenden, wie ich bereits in einem Kommentar erwähnt habe. Hier ist ein Weg, wie Sie es tun können. (Nicht vollständig getestet, damit es brechen kann.)
HTML:
%Vor%CSS:
%Vor%JS:
%Vor%Bearbeiten : Ich habe die abgerundeten Ecken hinzugefügt und es funktioniert genau wie Sie angegeben haben, keine Probleme mit den abgerundeten Ecken.
2 bearbeiten : Überprüfen Sie die JSBin Version dieses Codes.
Edit 3 : Wie der OP sagte, musste der Fortschrittsbalken flexibel skaliert werden. Diese Implementierung wird das nicht tun. Ich werde (wie ich zuvor) die Verwendung der jQueryUI-Fortschrittsleiste empfehlen. Es ist einfach zu bedienen und ziemlich leicht.
Edit 4 : Ich habe eine andere Implementation von dieser Methode entwickelt, die etwas mehr Javascript erfordert, aber Sie können es hier ausprobieren: Ссылка
Ich habe getan, was Sie für ein paar meiner Websites tun, hier ist, was ich getan habe:
Ich habe zuerst ein einfaches Markup gemacht:
%Vor%Und das CSS:
%Vor% Wenn das erledigt ist, ist das Einstellen des Fortschritts wirklich sehr einfach. Unabhängig davon, welchen Fortschritt Sie in der Fortschrittsanzeige anzeigen möchten, legen Sie die Breite des Elements #ProgressBarInner fest. Wenn Sie beispielsweise 32% anzeigen möchten, würden Sie Folgendes festlegen:
width: 32%
für die progressBarInner div.
Ich weiß nicht, wie ich dies mit jQuery machen kann, aber ich weiß, dass Sie CSS-Eigenschaften mit diesem Code festlegen können, also ist dies durchaus möglich.
Ich bin etwas verwirrt darüber, was Sie in Bezug auf die abgerundeten Ecken der gefüllten Farbe tun wollen! 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% voranschreiten und beim Passieren der abgerundeten Fläche einen coolen Effekt erzeugen!
Tags und Links javascript html jquery css