Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

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