Ladeanimation (Pure CSS)

15. November 2016 von | Kategorie(n): Programmierung
Schlagwörter: // // // //

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)
Diesen Post teilen:
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Schreibe einen Kommentar

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

26 − 21 =