Das Progress-Element erfüllt seine Aufgabe an sich gut und ist ein netter Ersatz für die als Ajax-Ladebilder genutzten gifs. Aber das Standardaussehen ist nicht gerade hübsch, besonders in Chrome. Doch kann man das Element mit CSS frei stylen. Ein halbtransparenter schwarzer Hintergrund mit blauem Balken geht z.B. so:
progress,
progress::-webkit-progress-bar {
background-color: rgba(0,0,0,0.4);
}
progress::-webkit-progress-bar-value,
progress::-webkit-progress-value,
progress::-moz-progress-bar {
background-color: blue;
}
Indeterminate
Wenn kein value gesetzt ist, gerät die Progress-Bar in einen "indeterminate"-Zustand, der Balken fährt immer hin und her:
Ist nun wie oben eine background-color gesetzt, bleibt der Balken unsichtbar, zumindest im aktuellen Chrome:
Das könnte ein Bug sein, ist aber auf jeden Fall nicht ideal. Um doch noch die Aktivität anzuzeigen, könnte ein .gif eingesetzt werden. Geschickter fand ich die Lösung über einen
per CSS animierten Gradient-Hintergrund:
progress:indeterminate,
progress:indeterminate::-webkit-progress-bar {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, white), color-stop(25%, grey), color-stop(50%, black), color-stop(75%, grey), color-stop(100%, white));
background-size: 2000px 20px;
-webkit-animation: gradient_pan 5s infinite linear;
animation: gradient_pan 5s infinite linear;
}
@-webkit-keyframes gradient_pan {
0% { background-position: left bottom; }
100% { background-position: right bottom; }
}
@-moz-keyframes gradient_pan {
0% { background-position: left bottom; }
100% { background-position: right bottom; }
}
@keyframes gradient_pan {
0% { background-position: left bottom; }
100% { background-position: right bottom; }
}
Den Gradient kann man mit etwas Geschick sicher noch besser gestalten.
