Heute stellen wir euch ein weiteres Feature rund um CSS3 vor. An dieser Stelle ging es bereits um anspruchsvolle Text-Layouts aus den Printmedien und hier um das Layouten mit dem Flexible Box Layout Module. In diesem Artikel stehen die Progress Bars im Mittelpunkt. Progress Bars sind ein tolles Stilmittel um dem User bestimmte Entwicklungsstufen und Fortschritte mitzuteilen. Ein User erkennt auf einem Blick, wie viel er von seinem Profil er bereits ausgefüllt hat oder wie lange ein Bestellvorgang noch andauert.
In der Vergangenheit wurden Progress Bars, wenn sie animiert dargestellt werden sollten, gerne in Flash oder mittels gif-Grafiken umgesetzt. Doch in Zeiten von CSS3, kann der Frontend Entwickler darauf verzichten und auf die gerne zitierten Webstandards setzen.
Zunächst basteln wir uns einen schönen Rahmen, in welchem die Progress Bar dargestellt wird. Dazu das HTML:
<div class="progressBar"> <span style="width: 25%"></span> </div>
und so, sieht die Box auch ansprechend aus:
.progressBar {
height: 20px;
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}Ergebnis:
Nun müssen wir noch ein ansprechenden Fortschrittsbalken in das <span> der .progressBar integrieren. Dafür kommt, wer hätte das gedacht, CSS3 zum Einsatz:
.progressBar > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -webkit-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -ms-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -o-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}Die vielen border-radius Angaben sind notwendig, um an den beiden äußeren Rändern die gewünschte Form zu erzeugen:
Nun müssen wir den Balken noch animieren:
.progressBar > span {
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
}
@-webkit-keyframes progress {
from { width: 0%; }
to { width: 50%; }
}
@-moz-keyframes progress {
from { width: 0%; }
to { width: 50%; }
}
@-ms-keyframes progress {
from { width: 0%; }
to { width: 50%; }
}
@keyframes progress {
from { width: 0%; }
to { width: 50%; }
}Dieser CSS-Snippet animiert den Balken mit einem weichen Ende von 0% auf 50%. Hier der Link zum Ausprobieren: jsFiddle Der inline-Style im <span> der .progressBar zum vorherigen Testen der Optik muss dafür natürlich wieder entfernt werden.