Published on

Advanced Guide: Create A Radial Progress With Daisyui With Tailwind CSS

Radial progress with Daisyui

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that helps developers create custom designs without having to write any CSS code. It provides pre-defined classes that can be used to style HTML elements. Tailwind CSS is easy to use and can be customized to fit any design.

The description of Radial progress with Daisyui ui component

DaisyUI is a component library for Tailwind CSS that provides pre-built components that can be easily customized. One of the components provided by DaisyUI is the Radial Progress component. The Radial Progress component is a circular progress bar that can be used to display progress in a visually appealing way.

Why use Tailwind CSS to create a Radial progress with Daisyui ui component?

Tailwind CSS provides a simple way to create custom designs without having to write any CSS code. With Tailwind CSS, developers can easily create custom designs that are responsive and easy to maintain. DaisyUI provides pre-built components that can be easily customized, which makes it a great choice for developers who want to create custom designs quickly.

The preview of Radial progress with Daisyui ui component.

To create a Radial Progress component with DaisyUI and Tailwind CSS, we will use the following code:

<div class="radial-progress">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="inset">
    <div class="percentage">{{__placeholder1__}}</div>
  </div>
</div>

Free download of the Radial progress with Daisyui's source code

The source code of Radial progress with Daisyui ui component.

To create a Radial Progress component with DaisyUI and Tailwind CSS, we will use the following code:

<div class="radial-progress">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="inset">
    <div class="percentage">50%</div>
  </div>
</div>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
  
  <div class="bg-black py-20 lg:py-[120px] overflow-hidden relative z-10">

    <div class="container xl:max-w-6xl mx-auto px-4">
        <header class="text-center mx-auto mb-12 lg:px-20">
            <h2 class="text-2xl leading-normal mb-2 font-bold text-white">
            Tecnologies / Frameworks
            </h2>
            <p class="text-white leading-relaxed font-light text-xl mx-auto pb-2">
            My favorite tecnologies!
            </p>
        </header>
    </div>

    <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 py-12">
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
          class="w-full bg-gray-900 rounded-lg sahdow-lg p-12 flex flex-col justify-center items-center"
        >
          <div class="mb-8">
            <div class="radial-progress bg-accent text-accent-content border-4 border-accent" style="--size:7rem; --value: 70">70%</div>
          </div>
          <div class="text-center">
            <p class="text-xl text-white font-bold mb-2">PHP</p>
            <p class="text-base text-gray-400 font-normal">________________________________________</p>
          </div>
        </div>

        <div
          class="w-full bg-gray-900 rounded-lg sahdow-lg p-12 flex flex-col justify-center items-center"
        >
          <div class="mb-8">
            <div class="radial-progress bg-accent text-accent-content border-4 border-accent" style="--size:7rem; --value: 90">90%</div>
          </div>
          <div class="text-center">
            <p class="text-xl text-white font-bold mb-2">Java</p>
            <p class="text-base text-gray-400 font-normal">________________________________________</p>
          </div>
        </div>

        <div
          class="w-full bg-gray-900 rounded-lg sahdow-lg p-12 flex flex-col justify-center items-center"
        >
          <div class="mb-8">
            <div class="radial-progress bg-accent text-accent-content border-4 border-accent" style="--size:7rem; --value: 80">80%</div>
          </div>
          <div class="text-center">
            <p class="text-xl text-white font-bold mb-2">JavaScript</p>
            <p class="text-base text-gray-400 font-normal">________________________________________</p>
          </div>
        </div>

        <div
          class="w-full bg-gray-900 rounded-lg sahdow-lg p-12 flex flex-col justify-center items-center"
        >
          <div class="mb-8">
            <div class="radial-progress bg-accent text-accent-content border-4 border-accent" style="--size:7rem; --value: 60">60%</div>
          </div>
          <div class="text-center">
            <p class="text-xl text-white font-bold mb-2">React</p>
            <p class="text-base text-gray-400 font-normal">________________________________________</p>
          </div>
        </div>

        <div
          class="w-full bg-gray-900 rounded-lg sahdow-lg p-12 flex flex-col justify-center items-center"
        >
          <div class="mb-8">
            <div class="radial-progress bg-accent text-accent-content border-4 border-accent" style="--size:7rem; --value: 70">70%</div>
          </div>
          <div class="text-center">
            <p class="text-xl text-white font-bold mb-2">VueJS</p>
            <p class="text-base text-gray-400 font-normal">________________________________________</p>
          </div>
        </div>
        
        <div
          class="w-full bg-gray-900 rounded-lg sahdow-lg p-12 flex flex-col justify-center items-center"
        >
          <div class="mb-8">
            <div class="radial-progress bg-accent text-accent-content border-4 border-accent" style="--size:7rem; --value: 85">85%</div>
          </div>
          <div class="text-center">
            <p class="text-xl text-white font-bold mb-2">HTML/CSS</p>
            <p class="text-base text-gray-400 font-normal">________________________________________</p>
          </div>
        </div>
      </div>
    </section>
  </div>

How to create a Radial progress with Daisyui with Tailwind CSS?

To create a Radial Progress component with DaisyUI and Tailwind CSS, we will follow these steps:

  1. Install Tailwind CSS and DaisyUI.
npm install tailwindcss daisyui
  1. Create a new HTML file and add the following code:
<!DOCTYPE html>
<html>
  <head>
    <title>Radial Progress with DaisyUI and Tailwind CSS</title>
    <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" />
    <link rel="stylesheet" href="./node_modules/daisyui/dist/daisyui.min.css" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="radial-progress">
      <div class="circle">
        <div class="mask full">
          <div class="fill"></div>
        </div>
        <div class="mask half">
          <div class="fill"></div>
          <div class="fill fix"></div>
        </div>
        <div class="shadow"></div>
      </div>
      <div class="inset">
        <div class="percentage">50%</div>
      </div>
    </div>
  </body>
</html>
  1. Create a new CSS file and add the following code:
.radial-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.circle {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
}

.mask,
.fill {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.mask {
  clip: rect(0, 150px, 150px, 75px);
}

.full {
  transform: rotate(180deg);
}

.half {
  transform: rotate(45deg);
}

.fill {
  clip: rect(0, 75px, 150px, 0);
  background-color: #f00;
}

.fill.fix {
  transform: rotate(90deg);
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
}

.inset {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.percentage {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}
  1. Save the HTML and CSS files and open the HTML file in a web browser.

Conclusion

In this article, we have learned how to create a Radial Progress component with DaisyUI and Tailwind CSS. We have seen how Tailwind CSS provides a simple way to create custom designs without having to write any CSS code. We have also seen how DaisyUI provides pre-built components that can be easily customized. By following the steps outlined in this article, developers can create custom designs quickly and easily.