Creative CSS Loading Animation by Muthujoo

.container { background: #f3c5bd; background: -moz-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), color-stop(100%,#c72200)); background: -webkit-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
background: -o-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
background: -ms-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
background: linear-gradient(to bottom, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%);
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 );
width:190px; height:240px; padding:10px; text-align:center; font:14px Verdana, Geneva, sans-serif; color:#000; text-shadow:1px 1px 1px #ff0; }
.bokeh { font-size:100px; width:150px; height:180px; position:relative; margin:0px auto; border-radius:50%; border:2px solid #000; list-style:none; background: #e1ffff;
background: -moz-linear-gradient(top, #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1ffff), color-stop(7%,#e1ffff), color-stop(12%,#e1ffff), color-stop(12%,#fdffff), color-stop(30%,#e6f8fd), color-stop(54%,#c8eefb), color-stop(75%,#bee4f, color-stop(100%,#b1d8f5));
background: -webkit-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
background: -o-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
background: -ms-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
background: linear-gradient(to bottom, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 ); }
.bokeh li { position:absolute; width:.2em; height:.2em; border-radius:50%; }
.bokeh li:nth-child(1) { left:50%; top:0; margin:0 0 0 -.1em; background:#00C176; -webkit-transform-origin:50% 250%; -moz-transform-origin:50% 250%; -ms-transform-origin:50% 250%; -o-transform-origin:50% 250%; transform-origin:50% 250%; -webkit-animation:rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
-moz-animation:rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate; -ms-animation:rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
-o-animation:rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate; animation:rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate; }
.bokeh li:nth-child(2) { top:50%; right:0; margin:-.1em 0 0 0; background:#FF003C; -webkit-transform-origin:-150% 50%; -moz-transform-origin:-150% 50%;
-ms-transform-origin:-150% 50%; -o-transform-origin:-150% 50%; transform-origin:-150% 50%; -webkit-animation:rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
-moz-animation:rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate; -ms-animation:rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
-o-animation:rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate; animation:rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate; }
.bokeh li:nth-child(3) { left:50%; bottom:0; margin:0 0 0 -.1em; background:#FABE28; -webkit-transform-origin:50% -150%; -moz-transform-origin:50% -150%;
-ms-transform-origin:50% -150%; -o-transform-origin:50% -150%; transform-origin:50% -150%; -webkit-animation:rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
-moz-animation:rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate; -ms-animation:rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
-o-animation:rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate; animation:rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate; }
.bokeh li:nth-child(4) { top:50%; left 0; margin:-.1em 0 0 0; background:#88C100; -webkit-transform-origin:250% 50%; -moz-transform-origin:250% 50%;
-ms-transform-origin:250% 50%; -o-transform-origin:250% 50%; transform-origin:250% 50%; -webkit-animation:rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
-moz-animation:rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate; -ms-animation:rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
-o-animation:rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate; animation:rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate; }
@-webkit-keyframes rota { to { -webkit-transform:rotate(360deg); } } @-moz-keyframes rota { to { -moz-transform:rotate(360deg); } }
@-ms-keyframes rota { to { -ms-transform:rotate(360deg); } } @-o-keyframes rota { to { -o-transform:rotate(360deg); } }
@keyframes rota { to { transform:rotate(360deg); } }
@-webkit-keyframes opa { 12.0% { opacity:0.80; } 19.5% { opacity:0.88; } 37.2% { opacity:0.64; } 40.5% { opacity:0.52; } 52.7% { opacity:0.69; }
60.2% { opacity:0.60; } 66.6% { opacity:0.52; } 70.0% { opacity:0.63; } 79.9% { opacity:0.60; } 84.2% { opacity:0.75; } 91.0% { opacity:0.87; } }
@-moz-keyframes opa { 12.0% { opacity:0.80; } 19.5% { opacity:0.88; } 37.2% { opacity:0.64; } 40.5% { opacity:0.52; } 52.7% { opacity:0.69; }
60.2% { opacity:0.60; } 66.6% { opacity:0.52; } 70.0% { opacity:0.63; } 79.9% { opacity:0.60; } 84.2% { opacity:0.75; } 91.0% { opacity:0.87; } }
@-ms-keyframes opa { 12.0% { opacity:0.80; } 19.5% { opacity:0.88; } 37.2% { opacity:0.64; } 40.5% { opacity:0.52; } 52.7% { opacity:0.69; }
60.2% { opacity:0.60; } 66.6% { opacity:0.52; } 70.0% { opacity:0.63; } 79.9% { opacity:0.60; } 84.2% { opacity:0.75; } 91.0% { opacity:0.87; } }
@-o-keyframes opa { 12.0% { opacity:0.80; } 19.5% { opacity:0.88; } 37.2% { opacity:0.64; } 40.5% { opacity:0.52; } 52.7% { opacity:0.69; }
60.2% { opacity:0.60; } 66.6% { opacity:0.52; } 70.0% { opacity:0.63; } 79.9% { opacity:0.60; } 84.2% { opacity:0.75; } 91.0% { opacity:0.87; } }
@keyframes opa { 12.0% { opacity:0.80; } 19.5% { opacity:0.88; } 37.2% { opacity:0.64; } 40.5% { opacity:0.52; } 52.7% { opacity:0.69; }
60.2% { opacity:0.60; } 66.6% { opacity:0.52; } 70.0% { opacity:0.63; } 79.9% { opacity:0.60; } 84.2% { opacity:0.75; } 91.0% { opacity:0.87; } }

<div class="container">Loading Animations CSS3 by Muthujoo
<section class="main"><br>
<ul class="bokeh">
<li></li><li></li>
<li></li>
<li></li>
</ul>
</section>
</div>

Tagged in:

• css3 loding animation
• css3 loder
• loding animation css3
• Postfix