Css_animations_loader.php

Quell Code

    <style>

h1{
	text-align:center;
	font-size:3em;
	margin-bottom:60px;
	font-weight:300;
	animation: headerblink 2s ease-in-out infinite alternate;
	-webkit-animation: headerblink 2s ease-in-out infinite alternate;
}
      
      
@keyframes headerblink{
    from {transform:scale(1,1);}
    to {transform:scale(0.8,0.8);}
}
@-webkit-keyframes headerblink{
    from {-webkit-transform:scale(1,1);}
    to {-webkit-transform:scale(0.8,0.8);}
}
      
      
#section1
{
	width:600px;
	border:1px solid #cccccc;
	background:#ffffff;
	margin:auto;
	padding:10px 20px;
	border-radius:30px;
	text-align:center;
}
 

.loader-threedots, .loader-alone, .loader-zoom, .loader-classic, .loader-sonar, .loader-littlecube, .loader-pendulum, .loader-alternator, .loader-rectangular, .loader-intersect, .loader-transporter, .loader-simplistic, .loader-spinner, .loader-stuck, .loader-symmetric, .loader-polysymmetric
{
	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);}
}

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

 
.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
{
	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
{
	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
{
	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
{
	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
{
	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
{
	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
{
	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
{
	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
{
	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
{
	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
{
	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
{
	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);}
}
 
      
      body {
    background-color: #f9f9f9;
    font-size: 16px;
    color: #444;
}

.post-body h2 {
    color: #e25633;
    text-align: center;
}

.post-body {
    max-width: 680px;
    margin: 20px auto;
    border: 10px solid #f0f0f0;
    padding: 15px 20px;
    background-color: #fff;
    color: #444;
}

/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}
 
pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}
/*
pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}
*/
pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}
      
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/prisma.js"></script>
    	<h1>CSS3 Beispiel Loader Animiert</h1>
        <div id="section1">
        	<h2>Three Dots</h2>
            <div class="loader-threedots">
            	<span></span>
                <span></span>
                <span></span>
            </div>
<pre data-codetype="CSSku">
<code class="language-css">
.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);}
}
</code></pre>
        	<h2>Alone</h2>
            <div class="loader-alone"><span></span></div>
            
<pre data-codetype="CSSku">
<code class="language-css">
.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);}
}
 </pre></code>
          
          
        	<h2>Zoom</h2>
            <div class="loader-zoom"></div>
<pre data-codetype="CSSku">
<code class="language-css">
.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);}
}
</code> </pre>
        	<h2>Classic</h2>
            <div class="loader-classic">
            	<span></span>
                <span></span>
            	<span></span>
                <span></span>
            	<span></span>
                <span></span>
            	<span></span>
                <span></span>
            	<span></span>
                <span></span>
            </div>
<pre data-codetype="CSSku">
<code class="language-css">
.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);}
}
           
</code> </pre>
        	<h2>Sonar</h2>
            <div class="loader-sonar">
            	<span></span>
                <span></span>
            </div>
<pre data-codetype="CSSku">
<code class="language-css">
 .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;}
}             
</code> </pre>  
        	<h2>Little Cube</h2>
            <div class="loader-littlecube">
            	<span></span>
            </div>
<pre data-codetype="CSSku">
<code class="language-css">
.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}
}            
</code> </pre>
        	<h2>Pendulum</h2>
            <div class="loader-pendulum">
            	<span></span>
            </div>
<pre data-codetype="CSSku">
<code class="language-css">
.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);}
}            
</code> </pre>
        	<h2>Alternator</h2>
            <div class="loader-alternator">
            	<span></span>
            	<span></span>
            </div>
<pre data-codetype="CSSku">
<code class="language-css">
.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);}
}
             
</code> </pre>
        	<h2>Rectangular</h2>
            <div class="loader-rectangular">
            	<span></span>
            	<span></span>
            </div>
<pre data-codetype="CSSku">
<code class="language-css">
 .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;}
}             
</code> </pre>
        	<h2>Intersect</h2>
            <div class="loader-intersect">
            	<span></span>
            	<span></span>
            </div>
<pre data-codetype="CSSku">
<code class="language-css">
.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);}
}
              
</code> </pre>
        	<h2>Transporter</h2>
            <div class="loader-transporter">
            	<span></span>
            	<span></span>
            	<span></span>
            	<span></span>
            	<span></span>
            </div>
 <pre data-codetype="CSSku">
<code class="language-css">
 .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;}
}           
</code> </pre>
        	<h2>Simplistic</h2>
            <div class="loader-simplistic"></div>
            
 <pre data-codetype="CSSku">
<code class="language-css">
.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);}
}              
</code> </pre>
        	<h2>Spinner</h2>
            <div class="loader-spinner"></div>
            
 <pre data-codetype="CSSku">
<code class="language-css">
.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;}
}              
</code> </pre>
            
        	<h2>Stuck</h2>
            <div class="loader-stuck">
            	<span></span>
            </div>
<pre data-codetype="CSSku">
<code class="language-css">
 .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);}
}
             
</code> </pre>
        	<h2>Symmetric</h2>
            <div class="loader-symmetric"></div>

<pre data-codetype="CSSku">
<code class="language-css">
.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);}
}              
</code> </pre>
        	<h2>Poly-Symmetric</h2>
            <div class="loader-polysymmetric">
            	<span></span>
            	<span></span>
            	<span></span>
            </div>
<pre data-codetype="CSSku">
<code class="language-css">
 .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);}
}            
</code> </pre>
        </div>
    <script>
      //Line Number
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){
  var t=e.element.parentNode;
  if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}
  var n=1+e.code.split("\n").length;
  var r;
  lines=new Array(n);
  lines=lines.join("<span></span>");
  r=document.createElement("span");
  r.className="line-numbers-rows";
  r.innerHTML=lines;
  if(t.hasAttribute("data-start")){
    t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)
  }
  e.element.appendChild(r)})
      
</script>