How to animate daisyUI radial progress with react-spring

Jasser Mark Arioste

Jasser Mark Arioste

How to animate daisyUI radial progress with react-spring

In this tutorial, I'll show you how to animate daisyUI radial progress using react-spring animation library. React spring is a great animation library with an infinite number of use cases. In my case, I didn't want to use a react progress library like react-circular-progressbar because I'm already using daisyUI for my project as shown below. 

Animation of radial progress in daisyUI

I'm assuming you already installed daisyUI in your project so let's start.

Install react-spring #

yarn add react-spring

Use useSpring hook to modify the styles #

Below is how to use useSpring hook to modify the styles of our progress bar.

import type { NextPage } from "next";
//import the necessary modules
import { useSpring, animated } from "react-spring";

const Home: NextPage = () => {
  //use useSpring hook to describe the animation
  //we  start with 0 --value and end with 75, while --size remains constant
  const styles = useSpring({
    from: {
      "--value": 0,
      "--size": "12rem",
    to: {
      "--value": 75,
  return (
    <div className="container mx-auto">
      <h1 className="text-2xl">Daisy UI Progress Demo</h1>

      <div className="flex items-center gap-4 p-16">
          {/* use animated.div and use the styles from useSpring hook */}
          <animated.div className="radial-progress text-primary" style={styles}>
            {/* animate the value by using .to() method */}
            {styles["--value"].to((v) => v.toFixed(1) + "%")}

export default Home;

Things to note from above:

  1. React spring takes care of re-rendering the component based on the useSpring settings we configured.
  2. Change the div to animated.div. Using div will only cause a compile time error because the style object is different from the usual style object.
  3. We used .to() method to animate the value

Resources #

Credits: Image by Walkerssk from Pixabay

Thanks for reading! If you like tutorials like this, make sure to subscribe to our newsletter below!

Share this post!

Related Posts


This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle