Star Wars - The Imperial Loader

index.html

<div class="header">
   <svg width="600px" height="455px">
   <g>
      <path fill="#F9C534" d="M79.1,191.8h20.7v63.5H79.1V191.8z"/>
      <path fill="#F9C534" d="M103.3,255.2v-63.5h20.7l13.9,26.4l13.8-26.4h20.7v63.5h-20.7v-26.4l-13.3,26.4h-1.1l-13.3-26.4v26.4H103.3
         z"/>
      <path fill="#F9C534" d="M176.7,255.2v-63.5H218c5.1,0.5,9.3,1.8,12.7,4c3.3,2.2,5.7,5.2,7.1,9.1c1.3,4.7,1.8,8.2,1.6,10.5
         c-0.2,2.3-0.7,4.5-1.4,6.6c-0.7,2.1-2.6,4.4-5.8,7.1c-3.2,2.7-7.4,4.4-12.7,5.2h-19.9v21H176.7z M199.6,207.6v11.7h16
         c0.8,0,1.8-0.3,2.8-0.9c1-0.6,1.5-2.2,1.6-4.8c-0.1-2.4-0.7-4-1.8-4.8c-1-0.8-1.9-1.2-2.6-1.2H199.6z"/>
      <path fill="#F9C534" d="M242.6,255.2v-63.5H297v18.9h-33.8v7.3h21.8V229h-21.8v7.3h39.1v18.9H242.6z"/>
      <path fill="#F9C534" d="M302.4,255.2v-63.5h41.3c5.1,0.5,9.3,1.8,12.6,4c3.3,2.2,5.7,5.2,7.2,9c1.2,5.6,1.2,10,0.2,13
         c-1.1,3-2.9,5.6-5.5,7.6c-2.6,2.1-6.4,3.7-11.3,4.8l4.7,6.1h19v18.9h-25l-20.1-21v21H302.4z M325.3,207.6v11.7h16
         c0.8,0,1.8-0.3,2.8-0.9c1-0.6,1.5-2.2,1.6-4.8c-0.1-2.4-0.7-4-1.8-4.8c-1-0.8-1.9-1.2-2.6-1.2H325.3z"/>
      <path fill="#F9C534" d="M369.6,191.8h20.7v63.5h-20.7V191.8z"/>
      <path fill="#F9C534" d="M388.5,255.2l20.9-63.5h31.5l21.2,63.5h-24l-4-11.4h-18.9l-4,11.4H388.5z M425.2,205.8l-9.1,25.1h17.5
         L425.2,205.8z"/>
      <path fill="#F9C534" d="M461.2,255.2v-63.5h20.7v44.6h34.4v18.9H461.2z"/>
   </g>
   <g>
      <path fill="#F9C534" d="M254,143.1v11.2h-11.9v26.4h-12.2v-26.4H218v-11.2H254z"/>
      <path fill="#F9C534" d="M276.8,156v-12.9h12.2v37.5h-12.2v-13.5H267v13.5h-12.2v-37.5H267V156H276.8z"/>
      <path fill="#F9C534" d="M291.7,180.6v-37.5h32.2v11.2h-20v4.3h12.9v6.5h-12.9v4.3H327v11.2H291.7z"/>
   </g>
   <g>
      <path fill="#F9C534" d="M215.5,311.3v-29.6h-8.8v-12.5h22.5v29.6H252v12.5H215.5z"/>
      <path fill="#F9C534" d="M300.7,290.5c0,4.6-1,8.5-2.9,11.8c-1.9,3.2-4.7,5.7-8.4,7.3c-3.6,1.6-8,2.5-13.1,2.5s-9.4-0.8-13-2.5
         c-3.6-1.6-6.4-4.1-8.2-7.3c-1.9-3.2-2.8-7.2-2.8-11.8c0-3.5,0.5-6.6,1.6-9.3c1.1-2.7,2.6-4.9,4.7-6.8c2.1-1.8,4.6-3.2,7.6-4.2
         c3-0.9,6.4-1.4,10.2-1.4c5,0,9.4,0.8,13,2.5c3.7,1.7,6.4,4.1,8.4,7.4C299.7,282,300.7,285.9,300.7,290.5z M267.3,290.6
         c0,2.7,0.6,5.1,1.8,7.1c1.2,2,3.6,3,7.2,3c2.8,0,4.8-0.5,6.2-1.6c1.4-1.1,2.2-2.3,2.6-3.6c0.3-1.4,0.6-3,0.7-4.9
         c-0.1-2.7-0.8-5.1-2-7.1c-1.2-2-3.7-3-7.5-3C270.3,280.5,267.3,283.9,267.3,290.6z"/>
      <path fill="#F9C534" d="M298.6,311.3l13.9-42.1h20.9l14.1,42.1h-15.9l-2.7-7.6h-12.5l-2.7,7.6H298.6z M323,278.6l-6,16.7h11.6
         L323,278.6z"/>
      <path fill="#F9C534" d="M346.9,311.3v-42.1h24.9c3.4,0,6.3,0.4,8.9,1.3c2.6,0.9,4.7,2.1,6.5,3.6c1.8,1.5,3.2,3.6,4.4,6.2
         c1.2,2.6,1.8,6,1.8,10.1c-0.2,3.8-0.9,7.1-1.9,9.8c-1.1,2.7-2.5,4.8-4.3,6.4c-1.8,1.6-3.9,2.8-6.5,3.6c-2.6,0.9-5.8,1.2-9.6,1.2
         H346.9z M361,279.7v21.2h8c1.8,0,3.3-0.4,4.4-1.2c1.1-0.8,2-1.8,2.7-2.9c0.7-1.2,1.1-3.4,1.3-6.5c-0.1-2.8-0.5-4.9-1.2-6.3
         c-0.7-1.4-1.7-2.4-2.8-3.2c-1.1-0.8-2.6-1.2-4.5-1.2H361z"/>
      <path fill="#F9C534" d="M395.4,311.3v-42.1h36.1v12.5h-22.4v4.8h14.5v7.4h-14.5v4.8h26v12.5H395.4z"/>
      <path fill="#F9C534" d="M435.1,311.3v-42.1h27.4c3.4,0.3,6.2,1.2,8.3,2.7s3.8,3.5,4.8,6c0.8,3.7,0.8,6.6,0.1,8.6
         c-0.7,2-1.9,3.7-3.7,5.1s-4.3,2.4-7.5,3.2l3.2,4h12.6v12.5h-16.6l-13.4-13.9v13.9H435.1z M450.3,279.7v7.8h10.6
         c0.6,0,1.2-0.2,1.8-0.6c0.7-0.4,1-1.5,1.1-3.2c-0.1-1.6-0.5-2.7-1.2-3.2s-1.3-0.8-1.7-0.8H450.3z"/>
   </g>
   <g>
      <path fill="none" stroke="#F9C534" stroke-width="20" stroke-miterlimit="10" d="M576.5,342.5c0,2.8-2.2,5-5,5h-543
         c-2.8,0-5-2.2-5-5v-227c0-2.8,2.2-5,5-5h543c2.8,0,5,2.2,5,5V342.5z"/>
   </g>
</svg>
</div>

<!--LOADER-->
<div class="center">
   <svg id="svg-loader"
       width="600px" height="455px">
      <g id="outer">
         <circle fill="#fff" cx="300.6" cy="228.4" r="77.3"/>
         <circle cx="300.4" cy="228.3" r="68.9"/>
      </g>
      <path id="mid" fill="#fff" d="M360.8,242.7l-6.5-1.7c2.4-12.4,0-23.9,0-23.9l7-1.5
         c-0.4-4-3.4-12.4-3.4-12.4l11.7-4.5c-1.3-3.1-7.3-12.2-7.3-12.2l-11.5,4.4c-1.9-3.3-7.8-7.7-7.8-7.7l-4.5,4.7
         c-12.8-9.6-20.6-11.7-20.6-11.7l2.2-6.7c-3.2-1.6-12.1-3.2-12.4-3.3l0.3-0.1l0.1-11.3c-0.1,0-14.9-0.3-15.1-0.3l0.1,11.6v0.1
         c0,0.1-9.1,1.7-12.3,3.3l2.2,6.7c0,0-7.8,2.1-20.6,11.7l-4.5-4.7c0,0-5.9,4.4-7.8,7.7l-10.2-4.6c0,0-5.4,10.9-6.7,14l9.8,2.9
         c0,0-2.9,8.4-3.4,12.4l7,1.5c0,0-2.4,11.5,0,23.9l-6.5,1.7c0,0,0.6,5.5,3.1,10.8l-9.6,4.1c0,0,4,8.8,6.4,11.9l9.5-3.8l8.9,9.2
         l4.9-5.2c0,0,11.8,9,20.7,11.9l-1.9,6.2c0,0,7,2.7,10.9,2.9l-0.3,11.5c0,0,6.1,0.4,8.8,0.3c2.7,0,5.5-0.2,6.9-0.5
         c0.3,0,0.5-0.5,0.5-0.5l-0.8-10.7c3.9-0.3,10.9-2.9,10.9-2.9l-1.9-6.2c8.9-2.9,20.7-11.9,20.7-11.9l4.9,5.2l8.9-9.2l10.2,4.9
         c2.4-3,6.7-11.6,6.7-11.6l-10.6-5.5C360.2,248.2,360.8,242.7,360.8,242.7z"/> 
      <g id="inner">
         <path d="M280.6,228.2c0-9.6,6.5-17.7,15.3-20.2c1.8-0.5,3.7-0.8,5.6-0.8c11.6,0,21,9.4,21,21c0,11.6-9.4,21-21,21
            S280.6,239.8,280.6,228.2z"/>
         <path d="M296.3,207.9l-5.9-21.3c0,0,12.4-3.5,22.4,0l-5.9,21.3"/>
         <path d="M316.1,213.5l16.6-16c0,0,9.1,9.1,11.1,19.5l-22.4,5.7"/>
         <path d="M287.8,213.5l-16.6-16c0,0-9.1,9.1-11.1,19.5l22.4,5.7"/>
         <path d="M281.2,233.3l-22,6.7c0,0,3.5,12.4,11.6,19.2l15.9-16.8"/>
         <path d="M316,242.6l16.2,16.4c0,0,9.3-8.9,11.5-19.2l-22.3-6.2"/>
         <path d="M296.3,248.2l-5.9,22c0,0,12.4,3.5,22.4,0l-5.9-22"/>
      </g>
   </svg>
   
   <div class="glow-circle"></div>
</div>

Star Wars - The Imperial Loader.markdown

Star Wars - The Imperial Loader

A star wars themed loader with the imperial logo, built with SVG and CSS3.

A Pen by Petrus "Gothburz" Rex on CodePen.

License.

style.css

$black: #000;

body{
   background: $black;
}

.header{
   position: fixed;
   top: 20%;
   left: 50%;
   transform: translate(-50%, -50%);   
}

.center{
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);   
}

@keyframes rotateOuter
{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);} 
}

#outer{
   position: relative;
   transform-origin: 50% 50%;
   /*animation: rotateOuter 5s ease infinite;*/
   animation: color 5s infinite;
   z-index: 5;
}

@keyframes rotateMid
{
    from{transform:rotate(0deg);}
    to{transform:rotate(-360deg);}
}

#mid{
   transform-origin: 50% 50%;
   animation: rotateMid 15s ease infinite;   
}

@keyframes rotateInner
{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

#inner{
   transform-origin: 50% 50%;
   animation: rotateInner 15s ease infinite;   
}