Ladeanimation (Pure CSS)

Ja, richtig! 🙂 Ich habe mich etwas drangesetzt und dann eine kleine, nette Animation gebastelt.

Pure CSS?

Die Animation läuft völlig ohne JavaScript oder sonstiges. Das einzige, was man braucht ist ein bisschen HTML  und die Keyframes, welche CSS zur Verfügung stellt.

Also gar nicht so kompliziert. Das dachte ich zunächst auch, jedoch schon eine ganze Menge an Code zusammengekommen.

Diese Animation besteht aus div-Containern, welche in drei Ebenen verschachtelt sind. Die grauen Streifen der Animation besitzen eine gleichnamige Klasse und wurden mit rotate entsprechend ausgerichtet. Die Drehung (also das transform) wird nicht an jedem „Streifen“ angewandt, sondern an den Ladekringel selber (id: ladekringel). Durch die Angabe ease-in-out kommt der Kringel kurz zum Stehen, wenn er sich einmal um 360 Grad gedreht hat. Dies dauert 2,5 Sekunden. Damit wäre auch schon das wichtigste erklärt, schau es dir einfach selber an.

<html>
<head>
	<style>
	    /* Die Keyframes definieren die Animation */
		@-webkit-keyframes rotieren {
			/* Safari und Chrome kriegen ne Extrawurst */
			from {
				-ms-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);
			}
			to {
				-ms-transform: rotate(360deg);
				-moz-transform: rotate(360deg);
				-webkit-transform: rotate(360deg);
				-o-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}
		
		@keyframes rotieren {
			from {
				-ms-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);
			}
			to {
				-ms-transform: rotate(360deg);
				-moz-transform: rotate(360deg);
				-webkit-transform: rotate(360deg);
				-o-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}
		/* Ende Keyframes */
		
		/* Hier die class, welche die Keyframe-Animation verwendet */
		.rotieren {
		  -webkit-animation: rotieren 2.5s ease-in-out infinite;
		  -moz-animation: rotieren 2.5s ease-in-out infinite;
		  -ms-animation: rotieren 2.5s ease-in-out infinite;
		  -o-animation: rotieren 2.5s ease-in-out infinite;
		  animation: rotieren 2.5s ease-in-out infinite;
		}
		
		/* Ladekringel */
		#ladekringel {
			position: relative;
			background: #C0E67A;
			border-radius: 35px;
			width: 70px;
			height: 70px;
			margin: 200px auto;
		}
		
		#ladekringel > div {
			position: absolute;
			top: 5px;
			left: 34px;	
			width: 2px;
			height: 60px;
		}
		
		#ladekringel div.streifen {
			position: absolute;
			background: #262F3B;
			border-radius: 2px;                            
			width: 3px;
			height: 12px;
		}
		/* Ende Ladekringel */						
	</style>
</head>
<body>

	<div id='ladekringel' class='rotieren'> 
		<div style='transform:rotate(0deg);'>
			<div class='streifen'> </div>
			<div class='streifen' style='bottom:0px;'> </div>
		</div>
		<div style='transform:rotate(22.5deg);'>
			<div class='streifen'> </div>
			<div class='streifen' style='bottom:0px;'> </div>
		</div>
		<div style='transform:rotate(45deg);'>
			<div class='streifen'> </div>
			<div class='streifen' style='bottom:0px;'> </div>
		</div> 
		<div style='transform:rotate(67.5deg);'>
			<div class='streifen'> </div>
			<div class='streifen' style='bottom:0px;'> </div>
		</div> 
		<div style='transform:rotate(90deg);'>
			<div class='streifen'> </div>
			<div class='streifen' style='bottom:0px;'> </div>
		</div>
		<div style='transform:rotate(112.5deg);'>
			<div class='streifen'> </div>
			<div class='streifen' style='bottom:0px;'> </div>
		</div>
		<div style='transform:rotate(135deg);'>
			<div class='streifen'> </div>
			<div class='streifen' style='bottom:0px;'> </div>
		</div> 
		<div style='transform:rotate(157.5deg);'>
			<div class='streifen'> </div>
			<div class='streifen' style='bottom:0px;'> </div>
		</div>
	</div>
	<!-- / #ladekringel -->
</body>
</html>

Ansehen

 

Das war es auch schon. Senf dazugeben ? Scroll mal runter! Alternativ kannst diesen Blog auch abonnieren.

Was denkst du über diesen Post?
  • Gut (1)
  • Hilfreich (2)
  • Nicht gut (0)
  • Lustig 😀 (0)

von | Kategorie: Programmierung
Schlagwörter: // // //

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

90 − 88 =