🍕 Pizza Loader 🍕

index.html

<svg viewBox="0 0 122 122" xmlns="http://www.w3.org/2000/svg">
<defs>
    <g class="whole" id="pizza">
      <circle cx="61" cy="61" r="61" fill="#FFB800"/>
      <circle cx="61" cy="61" r="55" fill="#FFDE31"/>
      <g fill="#CD2D36" stroke="#FEA202" stroke-miterlimit="10" stroke-width="2">
        <circle cx="61" cy="29.11" r="8" />
        <circle cx="38.45" cy="38.45" r="8" />
        <circle cx="29.11" cy="61" r="8" />
        <circle cx="38.45" cy="83.55" r="8" />
        <circle cx="61" cy="92.89" r="8" />
        <circle cx="83.55" cy="83.55" r="8" />
        <circle cx="92.89" cy="61" r="8" />
        <circle cx="83.55" cy="38.45" r="8" />
      </g>
      <circle cx="61" cy="61" r="48.2" fill="none" stroke="#FEA202" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke-dasharray="16 10 8 4"/>
      <circle cx="61" cy="60.8" r="8" fill="#CD2D36" stroke="#FEA202" stroke-miterlimit="10" stroke-width="2"/>
      
      <g fill="none" stroke="#FEA202" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
        <g>
          <line x1="75.5" y1="115.1" x2="74.98" y2="113.16" />
          <line x1="47.03" y1="8.84" x2="46.51" y2="6.91" />
        </g>
        <g>
          <line x1="70.73" y1="116.15" x2="70.38" y2="114.18" />
          <line x1="51.63" y1="7.82" x2="51.28" y2="5.86" />
        </g>
        <g>
          <line x1="65.88" y1="116.79" x2="65.71" y2="114.8" />
          <line x1="56.3" y1="7.21" x2="56.12" y2="5.22" />
        </g>
        <g>
          <line x1="61" y1="117" x2="61" y2="115" />
          <line x1="61" y1="7" x2="61" y2="5" />
        </g>
        <g>
          <line x1="56.12" y1="116.79" x2="56.3" y2="114.8" />
          <line x1="65.71" y1="7.21" x2="65.88" y2="5.22" />
        </g>
        <g>
          <line x1="51.28" y1="116.15" x2="51.63" y2="114.18" />
          <line x1="70.38" y1="7.82" x2="70.73" y2="5.86" />
        </g>
        <g>
          <line x1="46.51" y1="115.1" x2="47.03" y2="113.16" />
          <line x1="74.98" y1="8.84" x2="75.5" y2="6.91" />
        </g>
        <g>
          <line x1="41.85" y1="113.63" x2="42.53" y2="111.75" />
          <line x1="79.47" y1="10.26" x2="80.16" y2="8.38" />
        </g>
        <g>
          <line x1="37.34" y1="111.76" x2="38.18" y2="109.95" />
          <line x1="83.82" y1="12.06" x2="84.67" y2="10.25" />
        </g>
        <g>
          <line x1="33" y1="109.5" x2="34" y2="107.77" />
          <line x1="88" y1="14.24" x2="89" y2="12.51" />
        </g>
        <g>
          <line x1="28.88" y1="106.88" x2="30.03" y2="105.24" />
          <line x1="91.98" y1="16.77" x2="93.12" y2="15.13" />
        </g>
        <g>
          <line x1="25.01" y1="103.9" x2="26.29" y2="102.37" />
          <line x1="95.71" y1="19.64" x2="97" y2="18.11" />
        </g>
        <g>
          <line x1="21.4" y1="100.6" x2="22.82" y2="99.19" />
          <line x1="99.19" y1="22.82" x2="100.6" y2="21.41" />
        </g>
        <g>
          <line x1="18.1" y1="97" x2="19.64" y2="95.72" />
          <line x1="102.37" y1="26.29" x2="103.9" y2="25.01" />
        </g>
        <g>
          <line x1="15.13" y1="93.12" x2="16.77" y2="91.98" />
          <line x1="105.24" y1="30.03" x2="106.87" y2="28.88" />
        </g>
        <g>
          <line x1="12.5" y1="89" x2="14.24" y2="88" />
          <line x1="107.77" y1="34" x2="109.5" y2="33" />
        </g>
        <g>
          <line x1="10.25" y1="84.67" x2="12.06" y2="83.83" />
          <line x1="109.94" y1="38.18" x2="111.76" y2="37.34" />
        </g>
        <g>
          <line x1="8.38" y1="80.16" x2="10.26" y2="79.47" />
          <line x1="111.75" y1="42.54" x2="113.62" y2="41.85" />
        </g>
        <g>
          <line x1="6.91" y1="75.5" x2="8.84" y2="74.98" />
          <line x1="113.16" y1="47.03" x2="115.09" y2="46.51" />
        </g>
        <g>
          <line x1="5.85" y1="70.73" x2="7.82" y2="70.38" />
          <line x1="114.18" y1="51.63" x2="116.15" y2="51.28" />
        </g>
        <g>
          <line x1="5.22" y1="65.89" x2="7.21" y2="65.71" />
          <line x1="114.8" y1="56.3" x2="116.79" y2="56.12" />
        </g>
        <g>
          <line x1="5" y1="61" x2="7" y2="61" />
          <line x1="115" y1="61" x2="117" y2="61" />
        </g>
        <g>
          <line x1="5.22" y1="56.12" x2="7.21" y2="56.3" />
          <line x1="114.8" y1="65.71" x2="116.79" y2="65.89" />
        </g>
        <g>
          <line x1="5.85" y1="51.28" x2="7.82" y2="51.63" />
          <line x1="114.18" y1="70.38" x2="116.15" y2="70.73" />
        </g>
        <g>
          <line x1="6.91" y1="46.51" x2="8.84" y2="47.03" />
          <line x1="113.16" y1="74.98" x2="115.09" y2="75.5" />
        </g>
        <g>
          <line x1="8.38" y1="41.85" x2="10.26" y2="42.54" />
          <line x1="111.75" y1="79.47" x2="113.62" y2="80.16" />
        </g>
        <g>
          <line x1="10.25" y1="37.34" x2="12.06" y2="38.18" />
          <line x1="109.94" y1="83.83" x2="111.76" y2="84.67" />
        </g>
        <g>
          <line x1="12.5" y1="33" x2="14.24" y2="34" />
          <line x1="107.77" y1="88" x2="109.5" y2="89" />
        </g>
        <g>
          <line x1="15.13" y1="28.88" x2="16.77" y2="30.03" />
          <line x1="105.24" y1="91.98" x2="106.87" y2="93.12" />
        </g>
        <g>
          <line x1="18.1" y1="25.01" x2="19.64" y2="26.29" />
          <line x1="102.37" y1="95.72" x2="103.9" y2="97" />
        </g>
        <g>
          <line x1="21.4" y1="21.41" x2="22.82" y2="22.82" />
          <line x1="99.19" y1="99.19" x2="100.6" y2="100.6" />
        </g>
        <g>
          <line x1="25.01" y1="18.11" x2="26.29" y2="19.64" />
          <line x1="95.71" y1="102.37" x2="97" y2="103.9" />
        </g>
        <g>
          <line x1="28.88" y1="15.13" x2="30.03" y2="16.77" />
          <line x1="91.98" y1="105.24" x2="93.12" y2="106.88" />
        </g>
        <g>
          <line x1="33" y1="12.51" x2="34" y2="14.24" />
          <line x1="88" y1="107.77" x2="89" y2="109.5" />
        </g>
        <g>
          <line x1="37.34" y1="10.25" x2="38.18" y2="12.06" />
          <line x1="83.82" y1="109.95" x2="84.67" y2="111.76" />
        </g>
        <g>
          <line x1="41.85" y1="8.38" x2="42.53" y2="10.26" />
          <line x1="79.47" y1="111.75" x2="80.16" y2="113.63" />
        </g>
        <g>
          <line x1="46.51" y1="6.91" x2="47.03" y2="8.84" />
          <line x1="74.98" y1="113.16" x2="75.5" y2="115.1" />
        </g>
        <g>
          <line x1="51.28" y1="5.86" x2="51.63" y2="7.82" />
          <line x1="70.38" y1="114.18" x2="70.73" y2="116.15" />
        </g>
        <g>
          <line x1="56.12" y1="5.22" x2="56.3" y2="7.21" />
          <line x1="65.71" y1="114.8" x2="65.88" y2="116.79" />
        </g>
        <g>
          <line x1="61" y1="5" x2="61" y2="7" />
          <line x1="61" y1="115" x2="61" y2="117" />
        </g>
        <g>
          <line x1="65.88" y1="5.22" x2="65.71" y2="7.21" />
          <line x1="56.3" y1="114.8" x2="56.12" y2="116.79" />
        </g>
        <g>
          <line x1="70.73" y1="5.86" x2="70.38" y2="7.82" />
          <line x1="51.63" y1="114.18" x2="51.28" y2="116.15" />
        </g>
        <g>
          <line x1="75.5" y1="6.91" x2="74.98" y2="8.84" />
          <line x1="47.03" y1="113.16" x2="46.51" y2="115.1" />
        </g>
        <g>
          <line x1="80.16" y1="8.38" x2="79.47" y2="10.26" />
          <line x1="42.53" y1="111.75" x2="41.85" y2="113.63" />
        </g>
        <g>
          <line x1="84.67" y1="10.25" x2="83.82" y2="12.06" />
          <line x1="38.18" y1="109.95" x2="37.34" y2="111.76" />
        </g>
        <g>
          <line x1="89" y1="12.51" x2="88" y2="14.24" />
          <line x1="34" y1="107.77" x2="33" y2="109.5" />
        </g>
        <g>
          <line x1="93.12" y1="15.13" x2="91.98" y2="16.77" />
          <line x1="30.03" y1="105.24" x2="28.88" y2="106.88" />
        </g>
        <g>
          <line x1="97" y1="18.11" x2="95.71" y2="19.64" />
          <line x1="26.29" y1="102.37" x2="25.01" y2="103.9" />
        </g>
        <g>
          <line x1="100.6" y1="21.41" x2="99.19" y2="22.82" />
          <line x1="22.82" y1="99.19" x2="21.4" y2="100.6" />
        </g>
        <g>
          <line x1="103.9" y1="25.01" x2="102.37" y2="26.29" />
          <line x1="19.64" y1="95.72" x2="18.1" y2="97" />
        </g>
        <g>
          <line x1="106.87" y1="28.88" x2="105.24" y2="30.03" />
          <line x1="16.77" y1="91.98" x2="15.13" y2="93.12" />
        </g>
        <g>
          <line x1="109.5" y1="33" x2="107.77" y2="34" />
          <line x1="14.24" y1="88" x2="12.5" y2="89" />
        </g>
        <g>
          <line x1="111.76" y1="37.34" x2="109.94" y2="38.18" />
          <line x1="12.06" y1="83.83" x2="10.25" y2="84.67" />
        </g>
        <g>
          <line x1="113.62" y1="41.85" x2="111.75" y2="42.54" />
          <line x1="10.26" y1="79.47" x2="8.38" y2="80.16" />
        </g>
        <g>
          <line x1="115.09" y1="46.51" x2="113.16" y2="47.03" />
          <line x1="8.84" y1="74.98" x2="6.91" y2="75.5" />
        </g>
        <g>
          <line x1="116.15" y1="51.28" x2="114.18" y2="51.63" />
          <line x1="7.82" y1="70.38" x2="5.85" y2="70.73" />
        </g>
        <g>
          <line x1="116.79" y1="56.12" x2="114.8" y2="56.3" />
          <line x1="7.21" y1="65.71" x2="5.22" y2="65.89" />
        </g>
        <g>
          <line x1="117" y1="61" x2="115" y2="61" />
          <line x1="7" y1="61" x2="5" y2="61" />
        </g>
        <g>
          <line x1="116.79" y1="65.89" x2="114.8" y2="65.71" />
          <line x1="7.21" y1="56.3" x2="5.22" y2="56.12" />
        </g>
        <g>
          <line x1="116.15" y1="70.73" x2="114.18" y2="70.38" />
          <line x1="7.82" y1="51.63" x2="5.85" y2="51.28" />
        </g>
        <g>
          <line x1="115.09" y1="75.5" x2="113.16" y2="74.98" />
          <line x1="8.84" y1="47.03" x2="6.91" y2="46.51" />
        </g>
        <g>
          <line x1="113.62" y1="80.16" x2="111.75" y2="79.47" />
          <line x1="10.26" y1="42.54" x2="8.38" y2="41.85" />
        </g>
        <g>
          <line x1="111.76" y1="84.67" x2="109.94" y2="83.83" />
          <line x1="12.06" y1="38.18" x2="10.25" y2="37.34" />
        </g>
        <g>
          <line x1="109.5" y1="89" x2="107.77" y2="88" />
          <line x1="14.24" y1="34" x2="12.5" y2="33" />
        </g>
        <g>
          <line x1="106.87" y1="93.12" x2="105.24" y2="91.98" />
          <line x1="16.77" y1="30.03" x2="15.13" y2="28.88" />
        </g>
        <g>
          <line x1="103.9" y1="97" x2="102.37" y2="95.72" />
          <line x1="19.64" y1="26.29" x2="18.1" y2="25.01" />
        </g>
        <g>
          <line x1="100.6" y1="100.6" x2="99.19" y2="99.19" />
          <line x1="22.82" y1="22.82" x2="21.4" y2="21.41" />
        </g>
        <g>
          <line x1="97" y1="103.9" x2="95.71" y2="102.37" />
          <line x1="26.29" y1="19.64" x2="25.01" y2="18.11" />
        </g>
        <g>
          <line x1="93.12" y1="106.88" x2="91.98" y2="105.24" />
          <line x1="30.03" y1="16.77" x2="28.88" y2="15.13" />
        </g>
        <g>
          <line x1="89" y1="109.5" x2="88" y2="107.77" />
          <line x1="34" y1="14.24" x2="33" y2="12.51" />
        </g>
        <g>
          <line x1="84.67" y1="111.76" x2="83.82" y2="109.95" />
          <line x1="38.18" y1="12.06" x2="37.34" y2="10.25" />
        </g>
        <g>
          <line x1="80.16" y1="113.63" x2="79.47" y2="111.75" />
          <line x1="42.53" y1="10.26" x2="41.85" y2="8.38" />
        </g>
        <g>
          <line x1="75.5" y1="115.1" x2="74.98" y2="113.16" />
          <line x1="47.03" y1="8.84" x2="46.51" y2="6.91" />
        </g>
        <g>
          <line x1="70.73" y1="116.15" x2="70.38" y2="114.18" />
          <line x1="51.63" y1="7.82" x2="51.28" y2="5.86" />
        </g>
        <g>
          <line x1="65.88" y1="116.79" x2="65.71" y2="114.8" />
          <line x1="56.3" y1="7.21" x2="56.12" y2="5.22" />
        </g>
        <g>
          <line x1="61" y1="117" x2="61" y2="115" />
          <line x1="61" y1="7" x2="61" y2="5" />
        </g>
      </g>
    </g> 
 <path id="sliceOutline" d="M62.94,61.63,82.68,9a2.51,2.51,0,0,0-1.41-3C72,.8,50,.8,40.63,5.9a2.46,2.46,0,0,0-1.34,3L59.06,61.63A2.07,2.07,0,0,0,62.94,61.63Z" />
 <mask id="pizzaMask">
 <use class="pizzaMask" xlink:href="#sliceOutline" x="0%" y="0%" fill="#FFF" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>  
  </mask>
 </defs>
 <g mask="url(#pizzaMask)">
  <use xlink:href="#pizza" x="0%" y="0%"/>
  </g>
<use class="pizzaOutline" xlink:href="#sliceOutline" x="0%" y="0%" fill="none" stroke="#FEA202" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> 
</svg>

pizza-loader.markdown

🍕 Pizza Loader 🍕

Waiting for pizza is fun!

A Pen by Chris Gannon on CodePen.

License.

script.typescript

class App {
 
  constructor(){
       
   const tl = new TimelineMax( { repeat: -1} );
   tl.to(['.pizzaOutline', '.pizzaMask'], 7, {
    rotation: 360,
    svgOrigin: '61 61',
    ease: Linear.easeNone
   })
   .to('.whole', 7, {
    rotation: -45,
    svgOrigin: '61 61',
    ease: Linear.easeNone    
   }, 0)
   

  }

}


TweenMax.set('svg', {
  visibility: 'visible'
})

var app = new App();

TweenMax.globalTimeScale(4)

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

style.css

body {
 background-color: #FFFCF9;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 60%;
 height: 60%;
 visibility: hidden;
 
}