Creating an Animated Circular Progress Bar with SVG

Complete Tutorial (Youtube link) -

Below is the snippet for SVG Code with Explanation

Introduction

SVG (Scalable Vector Graphics) is a powerful way to create vector-based graphics for the web. In this tutorial, we will build an animated circular progress bar using SVG and CSS animations. The progress bar will include a shadow effect, smooth stroke animation, and embedded text.

Understanding the SVG Code

Let's break down the SVG code step by step.

1. Setting Up the SVG Canvas

<svg width='150' height='150' viewBox='0 0 36 36'>

• width='150' height='150' sets the size of the SVG canvas.

• viewBox='0 0 36 36' defines the coordinate system, allowing the graphic to scale.

2. Adding a Shadow Filter

<defs>

    <filter id='shadow' x='-50%' y='-50%'

         width='200%' height='200%'>

        <feDropshadow dx='0' dy='2' stdDeviation='3'  

         flood-color='#000' flood-opacity='0.5'/>

    </filter>

</defs>

• <defs> is used to define reusable elements.

• <filter> with id='shadow' defines a drop shadow effect.

• <feDropshadow> creates a shadow with:

  • dx='0' dy='2': Moves the shadow slightly downward.

  • stdDeviation='3': Controls blur intensity.

  • flood-color='#000' and flood-opacity='0.5': Defines shadow color and transparency.

3. Creating the Background Circle

<circle cx='18' cy='18' r='10' fill='white' stroke='blue' stroke-width='2' filter='url(#shadow)'/>

• This creates a circle with:

  • Center at (18,18), radius 10.

  • fill='white': White interior.

  • stroke='blue' stroke-width='2': Blue border.

  • filter='url(#shadow)': Applies the shadow effect.

4. Creating the Progress Circle

<circle class='progress-circle' cx='18' cy='18' r='16' fill='none' stroke='green' stroke-width='2' stroke-linecap='round' transform='rotate(-90 18 18)' stroke-dasharray='100' stroke-dashoffset='100-70'/>

• This circle represents the progress indicator.

• r='16': Larger than the background circle.

• stroke='green' stroke-width='2': Defines the progress stroke.

• stroke-linecap='round': Makes rounded stroke edges.

• transform='rotate(-90 18 18)': Rotates the progress bar so it starts from the top.

• stroke-dasharray='100': Defines the total length of the stroke.

• stroke-dashoffset='100-70': Calculates the progress dynamically (should be written as stroke-dashoffset='30').

5. Adding Text in the Center

<text x='18' y='20' text-anchor='middle' fill='black' font-size='5' font-family='Arial, sans-serif'> My Text </text>

• Positions the text in the center (x='18' y='20').

• text-anchor='middle': Centers the text.

• fill='black': Black color.

• font-size='5' font-family='Arial, sans-serif': Sets text properties.

6. Adding Animation

<style>

    .progress-circle {

        animation: progress-animation 0.5s ease-out

                   forwards;

    }

    @keyframes progress-animation {

        from { stroke-dashoffset: 100; }

        to { stroke-dashoffset: 30; }

    }

</style>

• .progress-circle applies an animation to the progress stroke.

• @keyframes progress-animation:

  • Starts (from) with stroke-dashoffset: 100; (empty circle).

  • Ends (to) at stroke-dashoffset: 30;, revealing 70% progress.

  • 0.5s ease-out forwards: Smoothly animates over 0.5 seconds.