CSS3 Beispiel Loader Animiert

Three Dots

.loader-threedots{
	outline: 1px solid transparent;
}

.loader-threedots{
	display:inline-block;
	font-size:0px;
	padding:0px;
}
.loader-threedots span{
	vertical-align:middle;
	border-radius:100%;
	background:#000000;
	display:inline-block;
	width:10px;
	height:10px;
	margin:3px 2px;
	-webkit-animation:loader-threedots 0.8s linear infinite alternate;
	animation:loader-threedots 0.8s linear infinite alternate;
}
.loader-threedots span:nth-child(1){
	-webkit-animation-delay:-0.8;
	animation-delay:-0.8s;
}
.loader-threedots span:nth-child(2){
	-webkit-animation-delay:-0.53333s;
	animation-delay:-0.53333s;
}
.loader-threedots span:nth-child(3){
	-webkit-animation-delay:-0.26666s;
	animation-delay:-0.26666s;
}
@keyframes loader-threedots{
    from {transform: scale(0, 0);}
    to {transform: scale(1, 1);}
}
@-webkit-keyframes loader-threedots{
    from {-webkit-transform: scale(0, 0);}
    to {-webkit-transform: scale(1, 1);}
}

Alone

.loader-alone{
	outline: 1px solid transparent;
}
   
.loader-alone{
	width:30px;
	height:30px;
	display:inline-block;
	padding:0px;
}
.loader-alone span{
	vertical-align:top;
	border-radius:100%;
	background:#000000;
	display:inline-block;
	width:8px;
	height:8px;	
	-webkit-animation:loader-alone 1s linear infinite;
	animation:loader-alone 1s linear infinite;
	transform-origin:center 15px;
	-webkit-transform-origin:center 15px;
}
@keyframes loader-alone{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes loader-alone{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
 

Zoom

.loader-zoom{
	outline: 1px solid transparent;
}

.loader-zoom{
	width:30px;
	height:30px;
	display:inline-block;
	padding:0px;
	border-radius:100%;
	background:#000000;
	-webkit-animation:loader-zoom 0.4s linear infinite alternate;
	animation:loader-zoom 0.4s linear infinite alternate;
}
@keyframes loader-zoom{
    from {transform: scale(0, 0);}
    to {transform: scale(1, 1);}
}
@-webkit-keyframes loader-zoom{
    from {-webkit-transform: scale(0, 0);}
    to {-webkit-transform: scale(1, 1);}
}
 

Classic

.loader-classic{
	outline: 1px solid transparent;
}  
   
.loader-classic{
	width:40px;
	height:40px;
	display:inline-block;
	padding:0px;
	text-align:left;
	-webkit-animation:loader-classic 1.3s linear infinite;
	animation:loader-classic 1.3s linear infinite;
}
.loader-classic span{
	position:absolute;
	vertical-align:top;
	border-radius:100%;
	background:#000000;
	display:inline-block;
	width:8px;
	height:8px;
	margin-left:16px;	
	transform-origin:center 20px;
	-webkit-transform-origin:center 20px;
}
.loader-classic span:nth-child(2) {transform: rotate(36deg);-webkit-transform: rotate(36deg); opacity:0.1;}
.loader-classic span:nth-child(3) {transform: rotate(72deg);-webkit-transform: rotate(72deg); opacity:0.2;}
.loader-classic span:nth-child(4) {transform: rotate(108deg);-webkit-transform: rotate(108deg); opacity:0.3;}
.loader-classic span:nth-child(5) {transform: rotate(144deg);-webkit-transform: rotate(144deg); opacity:0.4;}
.loader-classic span:nth-child(6) {transform: rotate(180deg);-webkit-transform: rotate(180deg); opacity:0.5;}
.loader-classic span:nth-child(7) {transform: rotate(216deg);-webkit-transform: rotate(216deg); opacity:0.6;}
.loader-classic span:nth-child(8) {transform: rotate(252deg);-webkit-transform: rotate(252deg); opacity:0.7;}
.loader-classic span:nth-child(9) {transform: rotate(288deg);-webkit-transform: rotate(288deg); opacity:0.8;}
.loader-classic span:nth-child(10) {transform: rotate(324deg);-webkit-transform: rotate(324deg); opacity:0.9;}
@keyframes loader-classic{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes loader-classic{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
           
 

Sonar

 .loader-sonar{
	outline: 1px solid transparent;
}
 .loader-sonar{
	width:30px;
	height:30px;
	display:inline-block;
	padding:0px;
	text-align:left;
}
.loader-sonar span{
	position:absolute;
	display:inline-block;
	width:30px;
	height:30px;	
	border-radius:100%;
	background:#000000;	
	-webkit-animation:loader-sonar 1.6s linear infinite;
	animation:loader-sonar 1.6s linear infinite;
}
.loader-sonar span:last-child{
	animation-delay:-0.8s;
	-webkit-animation-delay:-0.8s;
}
@keyframes loader-sonar{
    0% {transform: scale(0, 0);opacity:0.5;}
    100% {transform: scale(1, 1);opacity:0;}
}
@-webkit-keyframes loader-sonar{
    0% {-webkit-transform: scale(0, 0);opacity:0.5;}
    100% {-webkit-transform: scale(1, 1);opacity:0;}
}             
 

Little Cube

.loader-littlecube{
	outline: 1px solid transparent;
}
  .loader-littlecube{
	width:20px;
	height:20px;
	display:inline-block;
	padding:0px;
	text-align:left;
}
.loader-littlecube span{
	vertical-align:top;
	position:relative;
	display:inline-block;
	width:10px;
	height:10px;
	background:#000000;	
	opacity:0.75;	
	-webkit-animation:loader-littlecube 1s linear infinite;
	animation:loader-littlecube 1s linear infinite;
}
@keyframes loader-littlecube{
    0% {left:0px;top:0px}
    25% {left:10px;top:0px}
    50% {left:10px;top:10px}
    75% {left:0px;top:10px}
    100% {left:0px;top:0px}
}
@-webkit-keyframes loader-littlecube{
    0% {left:0px;top:0px}
    25% {left:10px;top:0px}
    50% {left:10px;top:10px}
    75% {left:0px;top:10px}
    100% {left:0px;top:0px}
}            
 

Pendulum

.loader-pendulum{
	outline: 1px solid transparent;
}
  .loader-pendulum{
	width:20px;
	height:20px;
	display:inline-block;
	padding:0px;
	text-align:left;
}
.loader-pendulum span{
	vertical-align:top;
	border-radius:100%;
	background:#000000;
	display:inline-block;
	width:8px;
	height:8px;
	margin-top:-20px;	
	-webkit-animation: loader-pendulum 0.8s ease-in-out infinite alternate;
	animation: loader-pendulum 0.8s ease-in-out infinite alternate;
	transform-origin:center 20px;
	-webkit-transform-origin:center 20px;
}
@keyframes loader-pendulum{
    from {transform: rotate(120deg);}
    to {transform: rotate(240deg);}
}
@-webkit-keyframes loader-pendulum{
    from {-webkit-transform: rotate(120deg);}
    to {-webkit-transform: rotate(240deg);}
}            
 

Alternator

.loader-alternator{
	outline: 1px solid transparent;
}
 .loader-alternator{
	width:40px;
	height:20px;
	display:inline-block;
	padding:0px;
	text-align:left;
}
.loader-alternator span{
	position:absolute;
	display:inline-block;
	width:20px;
	height:20px;	
	border-radius:100%;
	background:#000000;	
	-webkit-animation:loader-alternator 0.7s linear infinite alternate;
	animation:loader-alternator 0.7s linear infinite alternate;
}
.loader-alternator span:last-child{
	animation-delay:-0.7s;
	-webkit-animation-delay:-0.7s;
	margin-left:20px;
}
@keyframes loader-alternator{
    0% {transform: scale(0, 0);}
    100% {transform: scale(1, 1);}
}
@-webkit-keyframes loader-alternator{
    0% {-webkit-transform: scale(0, 0);}
    100% {-webkit-transform: scale(1, 1);}
}
             
 

Rectangular

 .loader-rectangular{
	outline: 1px solid transparent;
}
 .loader-rectangular{
	width:24px;
	height:35px;
	display:inline-block;
	padding:0px;
	text-align:left;
}
.loader-rectangular span{
	position:absolute;
	display:inline-block;
	width:4px;
	height:20px;
	background:#000000;	
	-webkit-animation:loader-rectangular 0.5s ease-in-out infinite alternate;
	animation:loader-rectangular 0.5s ease-in-out infinite alternate;
}
.loader-rectangular span:last-child{
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s;
	margin-left:20px;
}
@keyframes loader-rectangular{
    0% {margin-top:0px;}
    100% {margin-top:15px;}
}
@-webkit-keyframes loader-rectangular{
    0% {margin-top:0px;}
    100% {margin-top:15px;}
}             
 

Intersect

.loader-intersect{
	outline: 1px solid transparent;
}
.loader-intersect{
	width:30px;
	height:30px;
	display:inline-block;
	padding:0px;
	text-align:left;
}
.loader-intersect span{
	position:absolute;
	display:inline-block;
	width:30px;
	height:30px;	
	border-radius:100%;
	background:#000000;
	opacity:0.35;	
	-webkit-animation:loader-intersect 1s ease-in-out infinite alternate;
	animation:loader-intersect 1s ease-in-out infinite alternate;
}
.loader-intersect span:last-child{
	animation-delay:-1s;
	-webkit-animation-delay:-1s;
}
@keyframes loader-intersect{
    0% {transform: scale(0.5, 0.5);}
    100% {transform: scale(1, 1);}
}
@-webkit-keyframes loader-intersect{
    0% {-webkit-transform: scale(0.5, 0.5);}
    100% {-webkit-transform: scale(1, 1);}
}
              
 

Transporter

 .loader-transporter{
	outline: 1px solid transparent;
}
   .loader-transporter{
	width:72px;
	height:8px;
	display:inline-block;
	padding:0px;
	text-align:left;
}
.loader-transporter span{
	position:absolute;
	display:inline-block;
	width:8px;
	height:8px;	
	border-radius:100%;
	background:#000000;
	opacity:0.2;	
	-webkit-animation:loader-transporter1 2s linear infinite alternate;
	animation:loader-transporter1 2s linear infinite alternate;
}
.loader-transporter span:nth-child(2) {animation-name:loader-transporter2;-webkit-animation-name:loader-transporter2;}
.loader-transporter span:nth-child(3) {animation-name:loader-transporter3;-webkit-animation-name:loader-transporter3;}
.loader-transporter span:nth-child(4) {animation-name:loader-transporter4;-webkit-animation-name:loader-transporter4;}
.loader-transporter span:nth-child(5) {animation-name:loader-transporter5;-webkit-animation-name:loader-transporter5;}
@keyframes loader-transporter1{
    0% {margin-left:0px;}
    50% {margin-left:64px;}
    100% {margin-left:64px;}
}
@-webkit-keyframes loader-transporter1{
    0% {margin-left:0px;}
    50% {margin-left:64px;}
    100% {margin-left:64px;}
}
@keyframes loader-transporter2{
    0% {margin-left:0px;}
    37.5% {margin-left:48px;}
    87.5% {margin-left:48px;}
    100% {margin-left:64px;}
}
@-webkit-keyframes loader-transporter2{
    0% {margin-left:0px;}
    37.5% {margin-left:48px;}
    87.5% {margin-left:48px;}
    100% {margin-left:64px;}
}
@keyframes loader-transporter3{
    0% {margin-left:0px;}
    25% {margin-left:32px;}
    75% {margin-left:32px;}
    100% {margin-left:64px;}
}
@-webkit-keyframes loader-transporter3{
    0% {margin-left:0px;}
    25% {margin-left:32px;}
    75% {margin-left:32px;}
    100% {margin-left:64px;}
}
@keyframes loader-transporter4{
    0% {margin-left:0px;}
    12.5% {margin-left:16px;}
    62.5% {margin-left:16px;}
    100% {margin-left:64px;}
}
@-webkit-keyframes loader-transporter4{
    0% {margin-left:0px;}
    12.5% {margin-left:16px;}
    62.5% {margin-left:16px;}
    100% {margin-left:64px;}
}
@keyframes loader-transporter5{
    0% {margin-left:0px;}
    50% {margin-left:0px;}
    100% {margin-left:64px;}
}
@-webkit-keyframes loader-transporter5{
    0% {margin-left:0px;}
    50% {margin-left:0px;}
    100% {margin-left:64px;}
}           
 

Simplistic

.loader-simplistic{
	outline: 1px solid transparent;
}
.loader-simplistic{
	width:35px;
	height:35px;
	display:inline-block;
	padding:0px;
	border-radius:100%;
	border:2px solid;
	border-top-color:rgba(0,0,0, 0.65);
	border-bottom-color:rgba(0,0,0, 0.15);
	border-left-color:rgba(0,0,0, 0.65);
	border-right-color:rgba(0,0,0, 0.15);	
	-webkit-animation: loader-simplistic 0.8s linear infinite;
	animation: loader-simplistic 0.8s linear infinite;
}
@keyframes loader-simplistic{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes loader-simplistic{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}              
 

Spinner

.loader-spinner{
	outline: 1px solid transparent;
}

.loader-spinner{
	color:#ffffff;
	width:50px;
	height:50px;
	display:inline-block;
	padding:0px;
	opacity:0.5;	
	background:#000000;	
	-webkit-animation: loader-spinner 1.5s ease-in-out infinite alternate;
	animation: loader-spinner 1.5s ease-in-out infinite alternate;
}
@keyframes loader-spinner{
    from {transform: rotate(0deg) scale(1,1);border-radius:0px;}
    to {transform: rotate(720deg) scale(0.5, 0.5);border-radius:25px;}
}
@-webkit-keyframes loader-spinner{
    from {-webkit-transform: rotate(0deg) scale(1, 1);border-radius:0px;}
    to {-webkit-transform: rotate(720deg) scale(0.5, 0.5);border-radius:25px;}
}              
 

Stuck

 .loader-stuck{
	outline: 1px solid transparent;
}
 .loader-stuck{
	color:#ffffff;
	width:50px;
	height:50px;
	display:inline-block;
	padding:0px;
	opacity:0.5;	
	border:8px solid rgba(0, 0, 0, 0.2);
	border-radius:50%;	
	background:transparent;
}
.loader-stuck span{
	vertical-align:top;
	border-radius:100%;
	background:#000000;
	display:inline-block;
	width:8px;
	height:8px;
	margin-top:-8px;	
	-webkit-animation:loader-stuck 1s linear infinite;
	animation:loader-stuck 1s linear infinite;
	transform-origin:center 33px;
	-webkit-transform-origin:center 33px;
}
@keyframes loader-stuck{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes loader-stuck{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
             
 

Symmetric

.loader-symmetric{
	outline: 1px solid transparent;
}
.loader-symmetric{
	width:35px;
	height:35px;
	display:inline-block;
	padding:0px;	
	border-radius:100%;
	border:2px solid;
	border-top-color:rgba(0,0,0, 0.65);
	border-bottom-color:rgba(0,0,0, 0.65);
	border-left-color:rgba(0,0,0, 0.15);
	border-right-color:rgba(0,0,0, 0.15);	
	-webkit-animation: loader-symmetric 0.8s ease-in-out infinite alternate;
	animation: loader-symmetric 0.8s ease-in-out infinite alternate;
}
@keyframes loader-symmetric{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes loader-symmetric{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}              
 

Poly-Symmetric

 .loader-polysymmetric{
	outline: 1px solid transparent;
}
  
.loader-polysymmetric{
	width:54px;
	height:54px;
	display:inline-block;
	padding:0px;
	text-align:left;
}
.loader-polysymmetric span{
	position:absolute;	
	border-radius:100%;
	border:2px solid;
	border-top-color:rgba(0,0,0, 0.65);
	border-bottom-color:rgba(0,0,0, 0.65);
	border-left-color:rgba(0,0,0, 0.15);
	border-right-color:rgba(0,0,0, 0.15);	
	-webkit-animation: loader-polysymmetric 1s ease-in-out infinite alternate;
	animation: loader-polysymmetric 1s ease-in-out infinite alternate;
}
.loader-polysymmetric span:nth-child(1){
	width:34px;
	height:34px;
	margin:8px;	
	animation-delay:0s;
	-webkit-animation-delay:0s;
}
.loader-polysymmetric span:nth-child(2){
	width:20px;
	height:20px;
	margin:15px;	
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s;
}
.loader-polysymmetric span:nth-child(3){
	width:50px;
	height:50px;
	animation-delay:-0.2s;
	animation-duration:3s;
	animation-direction:normal;
	animation-timing-function:linear;
	-webkit-animation-delay:-0.2s;
	-webkit-animation-duration:3s;
	-webkit-animation-direction:normal;
	-webkit-animation-timing-function:linear;
}
@keyframes loader-polysymmetric{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes loader-polysymmetric{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}