Creating a Circular File Download Progress Bar using SVG in React Native

 

---

Introduction: In this blog, we will learn how to create a circular download progress bar usingable Vector Graphics (G) in a React Native application. This progress bar can be used to show the progress of a file download in a visually appealing way.

Prerequisites:

• Basic understanding of React Native
• Familiarity with SVG

SVG Circular Progress Bar: SVG provides a powerful way to create vector-based graphics that can be scaled without losing quality. In this example, we will create a circular progress bar using SVG circles and paths.

The basic structure of the SVG component is as follows:

 <Svg width={size} height={size}>
        {/* Background Circle */}
        <Circle
          stroke="#D9D9D9"
          fill="none"
          cx={size / 2}
          cy={size / 2}
          r={radius}
          strokeWidth={strokeWidth}
        />
        {/* Progress Circle */}
        <Circle
          stroke="#217CF5"
          fill="none"
          cx={size / 2}
          cy={size / 2}
          r={radius}
          strokeDasharray={`${circum} ${circum}`}
          strokeDashoffset={radius * Math.PI * 2 * (svgProgress / 100)}
          strokeLinecap="round"
          transform={`rotate(-90, ${size / 2}, ${size / 2})`}
          strokeWidth={strokeWidth}
        />
        <View style={FilePickerStyle.InnerView}>
          <Svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <Path
              d="M2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14V11H2V14H14V11H16V14C16 14.55 15.8042 15.0208 15.4125 15.4125C15.0208 15.8042 14.55 16 14 16H2ZM8 12L3 7L4.4 5.55L7 8.15V0H9V8.15L11.6 5.55L13 7L8 12Z"
              fill="#6C727E"
            />
          </Svg>
        </View>
      </Svg>

Here, we have two circles — one for the background and one for the progress. The background circle is filled with a light gray color, while the progress circle is filled with a blue color.

The strokeDasharray and strokeDashoffset properties are used to create the progress effect. The strokeDasharray property defines the pattern of dashes and gaps used to stroke paths, while the strokeDashoffset property defines the distance into the dash pattern to start the stroke.

By adjusting the strokeDashoffset property based on the progress value, we can create the illusion of a progress bar.

Adding File Download Progress: To add file download progress to the progress bar, we need to update the strokeDashoffset property based on the progress value.

For example, if the progress value is 50, we can calculate the strokeDashoffset value as follows:

const strokeDashoffset = radius * Math.PI * 2 * (50 / 100);

We can then pass this value to the strokeDashoffset property of the progress circle.

<Circle stroke=”#217CF5" … strokeDashoffset={strokeDashoffset} … />

Conclusion: In this blog, we learned how to create a circular file download progress bar using SVG in a React Native application. By using SVG circles and paths, we can create a visually appealing progress bar that can be scaled without losing quality. By updating the strokeDashoffset property based on the progress value, we can create the illusion of a progress bar.

---

“Unlock a World of Knowledge and Fun — Subscribe Now and Join the UNBOX Community!”