Blog

Problem

Vor kurzem bin ich in die Situation gekommen das ich eine Ladegrafik (Throbber) auf einem dunklen Hintergrund anzeigen musste. Da es sich ein animiertes Bild handelt, liegt nahe dafür ein Gif zu verwenden, das Problem hierbei ist aber der fehlende Alpha-Kanal für halb-Transparenz. Egal wie gut man die Grafik ausarbeitet, es bleiben immer "ausgefranzte", weiße Ränder:

Lösung

Diesem Problem kann man mit modernen Webtechniken, in diesem Fall CSS3 begegnen. Wir verwenden eine PNG-Grafik, welche den Alpha-Kanal unterstützt und erzeugen die Bewegung mit CSS3-Animations. Für ältere Browser (Internet Explorer) gibt es als Fallback-Lösung, es wird  einfach das etwas hässlichere Gif angezeigt.

Umsetzung

Wir verwenden ein div, welches als Standardwert erstmal das Gif als Hintergrundgrafik bekommt:

 HTML

<div class="loader"></div>

CSS

 div.loader {
	height: 100px;
	width: 100px;
	background: url(http://www.joocom.de/wp-content/uploads/icon_loader_round_big_grew.gif) no-repeat 0 0 transparent;
}

Ergebnis

Den CSS überschreiben wir jetzt mit einer Regel die von allen modernen Browsern, die auch CSS-Animation beherrschen, interpretiert wird. Die Animation habe ich "rotate" getauft und sie läuft unendlich (infinite). Sie muss leider noch mit Browser-Prefixen erstellt und definiert werden. Dies kann aber auch durch ein less oder sass Mixin verschönert werden:

Grafik

CSS

div.loader:not(:required) {
	background-image: url(http://www.joocom.de/wp-content/uploads/icon_loader_round_big_grew.png);
	-webkit-animation: rotate .5s infinite linear;
	-moz-animation: rotate .5s infinite linear;
	-ms-animation: rotate .5s infinite linear;
	-o-animation: rotate .5s infinite linear;
	animation: rotate .5s infinite linear;
}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes rotate {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}

@-ms-keyframes rotate {
	from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

@-o-keyframes rotate {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

Das Endergebnis

Den ganzen Code findet ihr auch bei jsfiddle.