,tutorialscss ,Animierte Loader = CSS3 Beispiel Loader Animiert 

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);}

}