CSS Ladenbalken
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
artikel
code
empfehlen
farbigen hintergrund
fortschritt
geschwindigkeit
hintergrund
http
idee
index
kleinen roten rand
machen
maske
position
radius
steigung
url
verpassen
versetzen
versuchen
-
Hallo,
ich wollte die Ecken meines Ladebalken abrunden.
Da ich vom IE nicht viel halte habe ich es schnell mit
-webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
erledigt.
In diesem DIV liegt ein weiteres eckiges DIV, welches die Füllung des Ladenbalken darstellt. Die Länge dieses DIVs wird beim Laden vergrößert und somit entsteht ein Ladenbalken.
Aber seit ich den Ladenbalken abgerundet habe, liegt die eckige Füllung über den runden Ecken.
Um es leichter zu verstehen:
http://img17.imageshack.us/i/eckig.png/
Aussehen soll das ganze aber so:
http://img340.imageshack.us/i/rund.png/
jemand eine Idee wie ich das anstelle?
Hier der Code für die 2 DIVs
.fortschrittsbalken{ position:absolute; left:0px; top:0px; width:300px; height:20px; background-color:#999; border:thin #000 solid; overflow:hidden; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .fortschritt{ position:absolute; left:0px; top:0px; width:100px; height:20px; background-color:#F00; } -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Was hindert dich dem Ladebalken auch einen border-radius zu verpassen? Was mir noch einfallen würde, wäre es mit z-index zu versuchen - also die Füllung unter den Ladebalken zu versetzen.
Ansonsten ist ein Link zu der entsprechenden Seite immer besser, da man sich dann ein besseres Bild des gesamten Codes machen und evtl. mal was ausprobieren kann - so kann man nur raten... -
kaetzle7 schrieb:
Was hindert dich dem Ladebalken auch einen border-radius zu verpassen?
gefällt mir persönlich nicht, da der ladebalken rechts eckig sein soll. Klar könnte ich den Radius nur auf der Linken Seite machen, allerdings würde dann das gleiche Problem auftreten sobald der Balken 100% gefüllt ist.
kaetzle7 schrieb:
Was mir noch einfallen würde, wäre es mit z-index zu versuchen
funktioniert nicht, da der Ladenbalken einen farbigen Hintergrund hat. Dieser würde den Fortschrittsbalken dann überdecken.
kaetzle7 schrieb:
Ansonsten ist ein Link zu der entsprechenden Seite immer besser
sry!
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Index</title> <script type="text/javascript" src="fortschrittsbalken fuellen.js"> /* fill(Fortschritt ID,Steigung,geschwindigkeit); */ </script> <link rel="stylesheet" href="class.css" /> <link rel="stylesheet" href="id.css" /> </head> <body> <div class="fortschrittsbalken" id="balken1"> <div class="fortschritt" id="fortschritt1"> </div> </div> <form> <input type="button" onclick="fill('fortschritt1',50,15);" /> </form> </body> </html>
class.css
@charset "utf-8"; /* CSS Document */ .fortschrittsbalken{ position:absolute; left:0px; top:0px; width:300px; height:20px; background-color:#999; border:thin #000 solid; overflow:hidden; /* -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; */ } .fortschritt{ position:absolute; left:0px; top:0px; width:0px; height:20px; background-color:#F00; }
id.css
@charset "utf-8"; /* CSS Document */ #balken1{ left:100px; top:100px; } #fortschritt1{ width:100px; }
fortschrittsbalken fuellen.js
// JavaScript Document var i = 0; function fill(fortschrittsbalken,steigung,geschwindigkeit){ if(i <= steigung){ document.getElementById(fortschrittsbalken).style.width = document.getElementById(fortschrittsbalken).offsetWidth + 1 +"px"; i = i + 1; window.setTimeout("fill('" + fortschrittsbalken + "'," + steigung + "," + geschwindigkeit + ")", geschwindigkeit); } else { i = 0; } } -
2 vorschläge:
1) der hintergrund könnte doch von anfang an einen kleinen roten rand auf der linken seite haben, der fortschrittsbalken wird dann eben um die ein, zwei pixel verschoben. so hätte aber der ladebalken auch bei 0% schon eine (wenn auch kleine) füllung.
2) mach doch die abgerundeten Ecken nur auf einer seite, und via js regelst du, dass auf der anderen seite auch aberundet ist, sowie die 100% erreicht sind. mir fällt zwar spontan nicht ein, wie genau man das macht, aber ich weiß, dass es geht ;)
siehe auch : http://de.selfhtml.org/dhtml/modelle/microsoft.htm#css_schreibweise -
marius71 schrieb:
kaetzle7 schrieb:
Was mir noch einfallen würde, wäre es mit z-index zu versuchen
funktioniert nicht, da der Ladenbalken einen farbigen Hintergrund hat. Dieser würde den Fortschrittsbalken dann überdecken.
Eine Möglichkeit wäre, dem Ladenbalken keinen Hintergrund zu verpassen, dafür dann ein neues DIV mit Hintergrund, welches per z-index dahinter liegt:
Hintergrund: z-index:1;
Fortschrittsbalken: z-index: 2;
Ladenbalken: z-index:3; (als Maske drübersetzen)
So sollte es eigentlich funzen.
Edit: Reihenfoge
Beitrag zuletzt geändert: 30.3.2011 16:46:44 von menschle -
menschle schrieb:
Hintergrund: z-index:1;
Fortschrittsbalken: z-index: 2;
Ladenbalken: z-index:3; (als Maske drübersetzen)
sehr gute Idee, funktioniert =) Danke -
Einen relativ guten Artikel über Fortschritssbalken gab es vor einiger Zeit mal http://www.antusblog.de/2009/07/27/fortschrittsbalken-mit-cssjavascript/ hier.
Die Lektüre kann ich nur empfehlen. -
devzone schrieb:
Einen relativ guten Artikel über Fortschritssbalken gab es vor einiger Zeit mal http://www.antusblog.de/2009/07/27/fortschrittsbalken-mit-cssjavascript/ hier.
Die Lektüre kann ich nur empfehlen.
das übertrifft natürlich alles
danke, kann ich nur weiter empfehlen -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
