Unlock the Power of Circular Progress Indicators in Your React App

Why Choose SVG?

When it comes to building visually appealing and interactive web applications, Scalable Vector Graphics (SVGs) are the way to go. Unlike traditional image formats like PNGs and GIFs, SVGs provide pixel-perfect rendering regardless of screen resolution. Plus, they offer a range of benefits, including:

• Scalability
• Interactivity
• Extensibility
• Embeddability
• Lightweightness
• SEO-friendliness
• Ease of editing

Building a Custom Circular Progress Indicator with SVG

To create a circular progress indicator, we’ll use two overlapping circular ring-like shapes, with one acting as the track and the other as the progress indicator. By manipulating the stroke-dasharray and stroke-dashoffset properties, we can create a dynamic progress indicator that updates based on the progress value.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="gray" stroke-width="10" fill="none" />
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="10" fill="none" stroke-dasharray="251.2" stroke-dashoffset="0" />
</svg>

Adding the Progress Component to React

To integrate our circular progress indicator into a React app, we’ll create a new React project and set up a ProgressBar component. We’ll define various props for the component, including:

• label
• labelColor
• spinnerMode
• spinnerSpeed
• progress
• indicatorColor
• indicatorCap
• size
• trackColor
• indicatorWidth
• trackWidth

const ProgressBar = ({
  label,
  labelColor,
  spinnerMode,
  spinnerSpeed,
  progress,
  indicatorColor,
  indicatorCap,
  size,
  trackColor,
  indicatorWidth,
  trackWidth,
}) => {
  // component implementation
};

Progress Component in Action with React Hooks

Using React Hooks, we’ll create a controlled progress indicator that updates based on the loading state. We’ll use the useState hook to maintain the loading and progress states, and the useEffect hook to perform side effects, such as updating the progress indicator.

import { useState, useEffect } from 'eact';

const App = () => {
  const [loading, setLoading] = useState(true);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    // fetch data from API
    setTimeout(() => {
      setProgress(100);
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      {loading? (
        <ProgressBar progress={progress} />
      ) : (
        <p>Data fetched successfully!</p>
      )}
    </div>
  );
};

Showing the ProgressBar Component While Fetching Data

To demonstrate the ProgressBar component in action, we’ll fetch data from a fake API using the useEffect hook. While the data is loading, we’ll display the ProgressBar component, and once the data is fetched, we’ll display the fetched data.

import axios from 'axios';

const App = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://fake-api.com/data')
     .then(response => {
        setData(response.data);
        setLoading(false);
      })
     .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      {loading? (
        <ProgressBar progress={50} />
      ) : (
        <p>Fetched data: {data}</p>
      )}
    </div>
  );
};