دانلود لودر زیبا و جذاب

به ادامه مطلب بروید

لینک دانلود:

http://s6.picofile.com/file/8258707168/loadernew_s1i2n3a4_loxblog_com.zip.html

نکته:

این لودر به صورت HTML و CSS میباشد که دارای رنگ بندی فوق العاده جذاب و شیک است.

سورس این لودر :

کد HTML :

<div class="crayon-pre"><div id="crayon-564556858fddd398069815-1" class="crayon-line"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"container"</span><span class="crayon-r ">&gt;</span></div><div id="crayon-564556858fddd398069815-2" class="crayon-line crayon-striped-line"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"loader10"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div id="crayon-564556858fddd398069815-3" class="crayon-line"><span class="crayon-r ">&lt;/div&gt;</span></div></div>

کدCSS :

</pre>
<div class="crayon-pre">
<div id="crayon-564556858fdec687779074-1" class="crayon-line"><span class="crayon-k ">body </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-2" class="crayon-line crayon-striped-line"><span class="crayon-e ">margin</span><span class="crayon-sy">:</span> <span class="crayon-i ">0</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-3" class="crayon-line"><span class="crayon-e ">padding</span><span class="crayon-sy">:</span> <span class="crayon-i ">0</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-4" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-5" class="crayon-line"></div>
<div id="crayon-564556858fdec687779074-6" class="crayon-line crayon-striped-line"><span class="crayon-k ">.container </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-7" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span> <span class="crayon-i ">center</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-8" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">#e74c3c</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-9" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">overflow</span><span class="crayon-sy">:</span> <span class="crayon-i ">hidden</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-10" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">position</span><span class="crayon-sy">:</span> <span class="crayon-i ">absolute</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-11" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span> <span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-12" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span> <span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-13" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-14" class="crayon-line crayon-striped-line"></div>
<div id="crayon-564556858fdec687779074-15" class="crayon-line"><span class="crayon-c">/* -------------- loader10 -------------- */</span></div>
<div id="crayon-564556858fdec687779074-16" class="crayon-line crayon-striped-line"></div>
<div id="crayon-564556858fdec687779074-17" class="crayon-line"><span class="crayon-k ">.loader10:before </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-18" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">content</span><span class="crayon-sy">:</span> <span class="crayon-s">""</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-19" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">position</span><span class="crayon-sy">:</span> <span class="crayon-i ">absolute</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-20" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">top</span><span class="crayon-sy">:</span> <span class="crayon-i ">0px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-21" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">left</span><span class="crayon-sy">:</span> <span class="crayon-i ">-25px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-22" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span> <span class="crayon-i ">12px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-23" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span> <span class="crayon-i ">12px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-24" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">border-radius</span><span class="crayon-sy">:</span> <span class="crayon-i ">12px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-25" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">-webkit-animation</span><span class="crayon-sy">:</span> <span class="crayon-i ">loader10g</span> <span class="crayon-i ">3s</span> <span class="crayon-i ">ease-in-out</span> <span class="crayon-i ">infinite</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-26" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">animation</span><span class="crayon-sy">:</span> <span class="crayon-i ">loader10g</span> <span class="crayon-i ">3s</span> <span class="crayon-i ">ease-in-out</span> <span class="crayon-i ">infinite</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-27" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-28" class="crayon-line crayon-striped-line"></div>
<div id="crayon-564556858fdec687779074-29" class="crayon-line"><span class="crayon-k ">.loader10 </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-30" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">position</span><span class="crayon-sy">:</span> <span class="crayon-i ">relative</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-31" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span> <span class="crayon-i ">12px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-32" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span> <span class="crayon-i ">12px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-33" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">top</span><span class="crayon-sy">:</span> <span class="crayon-i ">46%</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-34" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">left</span><span class="crayon-sy">:</span> <span class="crayon-i ">46%</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-35" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">border-radius</span><span class="crayon-sy">:</span> <span class="crayon-i ">12px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-36" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">-webkit-animation</span><span class="crayon-sy">:</span> <span class="crayon-i ">loader10m</span> <span class="crayon-i ">3s</span> <span class="crayon-i ">ease-in-out</span> <span class="crayon-i ">infinite</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-37" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">animation</span><span class="crayon-sy">:</span> <span class="crayon-i ">loader10m</span> <span class="crayon-i ">3s</span> <span class="crayon-i ">ease-in-out</span> <span class="crayon-i ">infinite</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-38" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-39" class="crayon-line"></div>
<div id="crayon-564556858fdec687779074-40" class="crayon-line crayon-striped-line"><span class="crayon-k ">.loader10:after </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-41" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">content</span><span class="crayon-sy">:</span> <span class="crayon-s">""</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-42" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">position</span><span class="crayon-sy">:</span> <span class="crayon-i ">absolute</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-43" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">top</span><span class="crayon-sy">:</span> <span class="crayon-i ">0px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-44" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">left</span><span class="crayon-sy">:</span> <span class="crayon-i ">25px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-45" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span> <span class="crayon-i ">10px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-46" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span> <span class="crayon-i ">10px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-47" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">border-radius</span><span class="crayon-sy">:</span> <span class="crayon-i ">10px</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-48" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-e ">-webkit-animation</span><span class="crayon-sy">:</span> <span class="crayon-i ">loader10d</span> <span class="crayon-i ">3s</span> <span class="crayon-i ">ease-in-out</span> <span class="crayon-i ">infinite</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-49" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-e ">animation</span><span class="crayon-sy">:</span> <span class="crayon-i ">loader10d</span> <span class="crayon-i ">3s</span> <span class="crayon-i ">ease-in-out</span> <span class="crayon-i ">infinite</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-50" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-51" class="crayon-line"></div>
<div id="crayon-564556858fdec687779074-52" class="crayon-line crayon-striped-line"><span class="crayon-n">@-webkit-keyframes loader10g {</span></div>
<div id="crayon-564556858fdec687779074-53" class="crayon-line"><span class="crayon-n">  0% {</span></div>
<div id="crayon-564556858fdec687779074-54" class="crayon-line crayon-striped-line"><span class="crayon-n">    background-color: rgba(255, 255, 255, .2);</span></div>
<div id="crayon-564556858fdec687779074-55" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-56" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">25% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-57" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-58" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-59" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">50% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-60" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-61" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-62" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">75% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-63" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-64" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-65" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">100% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-66" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-67" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-68" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-69" class="crayon-line"></div>
<div id="crayon-564556858fdec687779074-70" class="crayon-line crayon-striped-line"><span class="crayon-n">@keyframes loader10g {</span></div>
<div id="crayon-564556858fdec687779074-71" class="crayon-line"><span class="crayon-n">  0% {</span></div>
<div id="crayon-564556858fdec687779074-72" class="crayon-line crayon-striped-line"><span class="crayon-n">    background-color: rgba(255, 255, 255, .2);</span></div>
<div id="crayon-564556858fdec687779074-73" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-74" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">25% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-75" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-76" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-77" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">50% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-78" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-79" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-80" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">75% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-81" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-82" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-83" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">100% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-84" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-85" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-86" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-87" class="crayon-line"></div>
<div id="crayon-564556858fdec687779074-88" class="crayon-line crayon-striped-line"><span class="crayon-n">@-webkit-keyframes loader10m {</span></div>
<div id="crayon-564556858fdec687779074-89" class="crayon-line"><span class="crayon-n">  0% {</span></div>
<div id="crayon-564556858fdec687779074-90" class="crayon-line crayon-striped-line"><span class="crayon-n">    background-color: rgba(255, 255, 255, .2);</span></div>
<div id="crayon-564556858fdec687779074-91" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-92" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">25% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-93" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-94" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-95" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">50% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-96" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-97" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-98" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">75% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-99" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-100" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-101" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">100% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-102" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-103" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-104" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-105" class="crayon-line"></div>
<div id="crayon-564556858fdec687779074-106" class="crayon-line crayon-striped-line"><span class="crayon-n">@keyframes loader10m {</span></div>
<div id="crayon-564556858fdec687779074-107" class="crayon-line"><span class="crayon-n">  0% {</span></div>
<div id="crayon-564556858fdec687779074-108" class="crayon-line crayon-striped-line"><span class="crayon-n">    background-color: rgba(255, 255, 255, .2);</span></div>
<div id="crayon-564556858fdec687779074-109" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-110" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">25% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-111" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-112" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-113" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">50% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-114" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-115" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-116" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">75% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-117" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-118" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-119" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">100% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-120" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-121" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-122" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-123" class="crayon-line"></div>
<div id="crayon-564556858fdec687779074-124" class="crayon-line crayon-striped-line"><span class="crayon-n">@-webkit-keyframes loader10d {</span></div>
<div id="crayon-564556858fdec687779074-125" class="crayon-line"><span class="crayon-n">  0% {</span></div>
<div id="crayon-564556858fdec687779074-126" class="crayon-line crayon-striped-line"><span class="crayon-n">    background-color: rgba(255, 255, 255, .2);</span></div>
<div id="crayon-564556858fdec687779074-127" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-128" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">25% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-129" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-130" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-131" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">50% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-132" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-133" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-134" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">75% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-135" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-136" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-137" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">100% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-138" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-139" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-140" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-141" class="crayon-line"></div>
<div id="crayon-564556858fdec687779074-142" class="crayon-line crayon-striped-line"><span class="crayon-n">@keyframes loader10d {</span></div>
<div id="crayon-564556858fdec687779074-143" class="crayon-line"><span class="crayon-n">  0% {</span></div>
<div id="crayon-564556858fdec687779074-144" class="crayon-line crayon-striped-line"><span class="crayon-n">    background-color: rgba(255, 255, 255, .2);</span></div>
<div id="crayon-564556858fdec687779074-145" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-146" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">25% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-147" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-148" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-149" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">50% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-150" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-151" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-152" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-k ">75% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-153" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-154" class="crayon-line crayon-striped-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-155" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-k ">100% </span><span class="crayon-sy">{</span></div>
<div id="crayon-564556858fdec687779074-156" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span> <span class="crayon-i ">rgba</span><span class="crayon-sy">(</span><span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">255,</span> <span class="crayon-i ">.2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-564556858fdec687779074-157" class="crayon-line"><span class="crayon-h">  </span><span class="crayon-sy">}</span></div>
<div id="crayon-564556858fdec687779074-158" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span></div>
</div>
<pre class="">