Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animated progress and tick icon

Animated progress and tick icon

Uses a mixture of tweens and physics to make a loading icon with a success tick.

A Pen by Popmotion on CodePen.

License.

<svg class="progress-icon" width="250" height="250" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="tick-outline-path" d="M14 28c7.732 0 14-6.268 14-14S21.732 0 14 0 0 6.268 0 14s6.268 14 14 14z" opacity="0" />
<path id="tick-path" d="M6.173 16.252l5.722 4.228 9.22-12.69" opacity="0"/>
</defs>
<g class="tick-icon" stroke-width="2" stroke="rgba(0,0,0,.2)" fill="none" transform="translate(1, 1)">
<use class="tick-outline" xlink:href="#tick-outline-path" />
<use class="tick" xlink:href="#tick-path" />
</g>
<g class="tick-icon" stroke-width="2" stroke="#fff" fill="none" transform="translate(1, 1.2)">
<use class="tick-outline" xlink:href="#tick-outline-path" />
<use class="tick" xlink:href="#tick-path" />
</g>
</svg>
var showIcon = new ui.Tween({
values: {
opacity: 1,
length: {
to: 65,
ease: 'easeIn'
}
}
});
var spinIcon = new ui.Simulate({
values: {
rotate: -400
}
});
var progressCompleteOutline = new ui.Tween({
values: {
rotate: '-=200',
length: 100
}
});
var progressCompleteTick = new ui.Tween({
delay: 150,
values: {
length: 100,
opacity: 1
}
});
function showTick() {
var progressIcon = document.querySelector('.progress-icon');
var progressOutline = new ui.Actor({
element: progressIcon.getElementById('tick-outline-path')
});
var progressTick = new ui.Actor({
element: progressIcon.getElementById('tick-path')
});
progressOutline.start(showIcon)
.then(spinIcon);
setTimeout(function() {
progressOutline.start(progressCompleteOutline);
progressTick.start(progressCompleteTick);
}, 2000)
}
if (document.readyState != 'loading') {
showTick();
} else {
document.addEventListener('DOMContentLoaded', showTick);
}
<script src="//popmotion.io/assets/js/popmotion.global.js"></script>
body {
background: #62b4c6;
padding-top: 50px;
}
svg {
display: block;
margin: 0 auto;
}
@onassar
Copy link

onassar commented Mar 7, 2018

Any chance there's a demo of how the pieces fit together? The Pen is down.

Loading

@NigelThorne
Copy link

NigelThorne commented Jun 2, 2020

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment