Animated progress and tick icon

In this example below you will see how to do a Animated progress and tick icon with some HTML / CSS and Javascript

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

Thumbnail
This awesome code was written by timbrown81, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright timbrown81 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Animated progress and tick icon</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <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>
  <script src='https://popmotion.io/assets/js/popmotion.global.min.3.5.0.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/timbrown81/animated-progress-and-tick-icon-ZOVPoO */
body {
  background: #62b4c6;
  padding-top: 50px;
}

svg {
  display: block;
  margin: 0 auto;
}


/*Downloaded from https://www.codeseek.co/timbrown81/animated-progress-and-tick-icon-ZOVPoO */
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);
}

Comments