Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Oct 24, 2017
Embed
What would you like to do?
Newton's Cradle Loader
<svg width="300" height="120" id="clackers">
<!-- Left arc path -->
<svg>
<path id="arc-left-up" fill="none" d="M 90 90 A 90 90 0 0 1 0 0"/>
</svg>
<!-- Right arc path -->
<svg>
<path id="arc-right-up" fill="none" d="M 100 90 A 90 90 0 0 0 190 0"/>
</svg>
<text x="150" y="50" fill="#ffffff" font-family="Helvetica Neue,Helvetica,Arial" font-size="18"
text-anchor="middle">
L O A D I N G
</text>
<circle cx="15" cy="15" r="15">
<!-- I used a python script to calculate the keyPoints and keyTimes based on a quadratic function. -->
<animateMotion dur="1.5s" repeatCount="indefinite"
calcMode="linear"
keyPoints="0.0;0.19;0.36;0.51;0.64;0.75;0.84;0.91;0.96;0.99;1.0;0.99;0.96;0.91;0.84;0.75;0.64;0.51;0.36;0.19;0.0;0.0;0.05;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0"
keyTimes="0.0;0.025;0.05;0.075;0.1;0.125;0.15;0.175;0.2;0.225;0.25;0.275;0.3;0.325;0.35;0.375;0.4;0.425;0.45;0.475;0.5;0.525;0.55;0.575;0.6;0.625;0.65;0.675;0.7;0.725;0.75;0.775;0.8;0.825;0.85;0.875;0.9;0.925;0.95;0.975;1.0">
<mpath xlink:href="#arc-left-up"/>
</animateMotion>
</circle>
<circle cx="135" cy="105" r="15" />
<circle cx="165" cy="105" r="15" />
<circle cx="95" cy="15" r="15">
<animateMotion dur="1.5s" repeatCount="indefinite"
calcMode="linear"
keyPoints="0.0;0.0;0.05;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0.0;0.19;0.36;0.51;0.64;0.75;0.84;0.91;0.96;0.99;1.0;0.99;0.96;0.91;0.84;0.75;0.64;0.51;0.36;0.19;0.0"
keyTimes="0.0;0.025;0.05;0.075;0.1;0.125;0.15;0.175;0.2;0.225;0.25;0.275;0.3;0.325;0.35;0.375;0.4;0.425;0.45;0.475;0.5;0.525;0.55;0.575;0.6;0.625;0.65;0.675;0.7;0.725;0.75;0.775;0.8;0.825;0.85;0.875;0.9;0.925;0.95;0.975;1.0">
<mpath xlink:href="#arc-right-up"/>
</animateMotion>
</circle>
</svg>
svg {
position: absolute;
}
circle:nth-of-type(1) { fill: #ffffff; }
circle:nth-of-type(2) { fill: #fcd837; }
circle:nth-of-type(3) { fill: #f9a11f; }
circle:nth-of-type(4) { fill: #f27c21; }
#clackers {
/* border: 1px solid white; */
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background: #231f20;
}
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.