How to Modify DaisyUI Radial Progress to Have a Straight Line Cap

Jasser Mark Arioste

Jasser Mark Arioste

How to Modify DaisyUI Radial Progress to Have a Straight Line Cap

In one of my projects I use DaisyUI component library for its speed and flexibility. And in one of my react components, I had to use DaisyUI radial progress however I didn't like the rounded line caps for the default radial progress components. In this tutorial, we're going to modify daisyUI radial progress component to have a straight line cap as shown below.

How to Modify DaisyUI Radial Progress to Have a Straight Line Cap

How does DaisyUI implement the rounded line cap? #

In order to implement the straight line cap, first we have to ask ourselves how does daisyUI implement the rounded line cap so that we can make the correct modifications.

Upon closer  inspection,  the radial-progress class has 2 pseudo-elements, before and after which are the target elements for the radial-progress class. The radial-gradient and inset properties are causing the curved or rounded linecaps.

Inspecting radial-progress::before class
Inspecting radial-progress::after class

Creating the utility classes for a straight line cap #

We have to make modifications to these two pseudo-elements. In our globals.css file let's create two classes:


@tailwind base;
@tailwind components;
@tailwind utilities;

.radial-progress.radial-square::before {
  #just remove the radial-gradient background to remove the start line cap
  background: conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);

.radial-progress.radial-square::after {
  #just unset the inset to remove the end line cap
  inset: unset;

Usage #

Usage is very simple, we just add radial-square class to an element with  radial-progress class.

  className="radial-progress radial-square text-primary"
  style={{ "--value": 75 }}

There you have it. We have the following output:

DaisyUI radial progress with straight line cap

Conclusion #

We've successfully modified DaisyUI radial progress to create a straight line cap. One important thing to note is we have to understand the component first before we made modifications. I'd say it's one of the skills that great developers have, so if you come across situations like these in the future, be sure to investigate the code first and do your modifications after. 

If you like tutorials like these, please consider signing up to our newsletter below.

Credits: Image by Julius Silver from Pixabay

Share this post!

Related Posts