Check Mark animation component in salesforce

Hi,

In this post let's build the typical CHECKMARK we see in Swiggy, PhonePe etc using Lightning Web Components.

Let's use some animation in this post to grab some User attention.

Now let's deep dive into some features we are going to use in this post.

Now let's list down the properties that are used in this post.

HTML Properties:

Scalabe Vector Graphics (svg): This property is used to define the graphics in an XML format. Advantage of using this property is every attribute & element inside the svg tag can be animated.

Circle: This tag is used to create a circle. Few attributes used in creating a circle are cx & cy that defines the x & y co-ordinates of the circle, and r indicates the radius of the circle. stroke-width defines the width of the circle. Fill defines the color to be filled with.

Polyline: A polyline element is tag that is used inside an SVG tag which is used to create points and create a lines between all the points.

CSS Properties:

stroke-dasharray: This is an feature in CSS for creating dashes for an SVG tag. Increasing the number decreases the number of strokes and increasing the space between them.

stroke-dashoffset: This feature in CSS which defines where the dash of an Stroke will begin. 

HTML Code

 <template>  
   <svg>  
     <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1"  
       cy="65.1" r="62.1" />  
     <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round"  
       stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "></polyline>  
   </svg>  
 </template>  

CSS Code

 .path {  
   stroke-dasharray: 1000;  
   stroke-dashoffset: 100;  
   animation: dash 5s linear alternate infinite;  
 }  
 @keyframes dash {  
   from {  
     stroke-dashoffset: 100;  
   }  
   to {  
     stroke-dashoffset: 2500;  
   }  
 }