Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Jan 8, 2019
Embed
What would you like to do?
πŸ• Pizza Loader πŸ•
<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>
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)
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.