Having trouble implementing a circular progress bar with a custom Tailwind CSS library, the desired effect is not being achieved

I am on a mission to create a circular progress indicator.

Recently, I stumbled upon the daisyui library and its component called radial progress -

The documentation mentions that: "Radial progress requires the use of the --value CSS variable."

I attempted to implement this as follows:

      <div className="radial-progress" style={{ "--value": 70 }}>
        70%
      </div>

Unfortunately, it does not seem to be working. Am I missing something?

This is the desired outcome:

https://i.sstatic.net/pVGCm.png

You can also view the code on Codesandbox here: https://codesandbox.io/s/react-tailwind-playground-forked-9jwc49?file=/src/App.tsx

cssreactjstailwind-css

Answer №1

Success! My problem is now solved.

var customStyle = { "--value": 70 } as React.CSSProperties

<div className="circular-progress" style={customStyle}>
  70%
</div>

Answer №2

During my recent encounter with TypeScript, I encountered an issue. To resolve it, I created a file named global.d.ts in the main directory of my project and utilized module augmentation.

//global.d.ts
import React from "react";

declare module "react" {
  interface CSSProperties {
    "--value"?: string | number;
    "--size"?: string | number;
    "--thickness"?: string | number;
  }
}

Answer №3

In React JS, there is a module known as react-circular-progressbar that can help meet your needs for displaying circular progress bars.

Alternatively, you have the option of selecting from various packages available for implementing circular progress bars based on your specific requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The transition from Vuetify 2 to Vuetify 3 involves replacing deprecated properties like app, clipped-left, and offset-y with the new property called "

Seeking guidance on upgrading from Vuetify/Vue 2 to 3. As a non front-end developer tasked with updating legacy code, I'm facing challenges due to the migration guide assuming CSS knowledge and lacking examples for resolving removed features. The gui ...

cssvue.jsvuejs3vuetify.jsvuetifyjs3

Utilize CSS styling on dynamically loaded HTML content

I am working on a project similar to the StackOverflow editor. I am fetching markdown text, converting it to HTML, and then displaying it in a preview area. However, when I try to style the injected HTML elements using CSS, the styles are being ignored. Up ...

javascripthtmlcssvue.jsdom

Eliminate the standard cell padding in nested HTML tables

In my setup, there is a parent table where each td tag in the tr tag contains a child table. Specifically, as shown in the example with Data WS-C3.... in the picture. [![<table class="table table--bordered table--nostripes table-top"> <thead& ...

htmlcssangular

Avoid invoking the throttle function from lodash

I am currently facing an issue in my React project with a throttle function from lodash. The requirement is that the function should not be executed if the length of the parameter value is zero. I have tried checking the length of the value and using thro ...

javascriptreactjs

Customizing the appearance of a radio button within a form

I need assistance with styling a form that contains a radio button. I'm looking to customize the appearance of the radio button by adding a background image and also changing the default view of the check image. Additionally, I want the form to be cen ...

csshtmlformsradio-button

Finding the image source of a clicked image

Is it possible to retrieve the image src after clicking on another image? $(document).ready(function() { $('img.getimage').click(function() { alert($(this).attr('src')); }); }); .sinistra { width: 150px; } .getimage { wi ...

jquerycssonclick

The alignment in Firefox and Google Chrome does not appear to be consistent

The appearance of the content is correct in Google Chrome but incorrect in Firefox. Does anyone have any suggestions on how to fix this for Firefox? ...

htmlcsspositionlesscss-position

Troubleshooting problem with Bootstrap media object in CSS

I am attempting to utilize Bootstrap to showcase media content (linked here: https://getbootstrap.com/docs/4.0/layout/media-object/). However, despite copying and pasting the code from the documentation, the output does not match the example on the website ...

htmlcssbootstrap-4

In the realm of react-native, prioritize call requests

Currently, I am in the process of working on a school project that involves creating a chat application using React Native with Expo. While developing this project, I have come across an issue where I need to make two separate requests within a component: ...

reactjsreact-nativereact-hooksrequest

Removing an element in ReactJS

As a newcomer to React, I created an application that supports saving searches. Currently, it retrieves data from a static array data in JSON format. Unfortunately, I'm struggling with the process of removing saved searches from the list. You can vie ...

javascriptreactjs

Why does the alt text show up when the gif image fails to display?

While transitioning between pages, I am using a GIF image as a 'loader'. However, during the first 2 or 3 navigations, I can see the image, but for the rest of the transitions, instead of the image, I can only see the "alt" text that I have provi ...

htmlcssimagegifloader

The graphic is displayed at a width of 50%

I am currently working on a FrontEnd project and implementing Bootstrap 3 for the grid system. Additionally, I am utilizing art direction with the picture element. However, I seem to be facing an issue with the images. Every time I include the following s ...

htmlcsstwitter-bootstrap

"Errors in Firebase when setting objects in Firestore always slip through undetected

Within my Firebase firestore database, I have implemented a function that is responsible for creating or updating member profiles in the form of JSON objects. While the creation and updating functionalities are working as expected, I am encountering chal ...

reactjsfirebasereact-nativegoogle-cloud-firestore

How to eliminate vertical spacing between rows in Bootstrap?

I am looking to eliminate the unsightly vertical spacing between the bootstrap rows displayed below: https://i.sstatic.net/dgR2z.png The code appears as follows: <div class="outerbox container-fluid vw-100"> <div class="row vw-100 justify-co ...

htmlcssbootstrap-5

How can I use a button click to display multiple components in ReactJS?

I have created a Matchinfo component along with a Navbar component. When the view stats button is clicked, it should render the Navbar (allowing navigation back to the home page and vice versa) as well as the Matchinfo component. Content.js : import Reac ...

reactjs

Uniform selection frame width across nested list elements

I want to ensure that the width of the selection frame for all nested ul li elements is consistent, just like in this example. When hovering over an element (making the entire line clickable), I don't want any space on the left. Currently, I am using ...

htmlcssangularjs

Unable to interpret the Cookie with 'httpOnly: false' setting

Despite setting a cookie on my express server, I am unable to access it from the client side. Strangely, the Chrome dev tools show that the cookie is not marked as httpOnly or Secure. However, when attempting to retrieve it through my React app or by typin ...

reactjsexpresscookies

How can you center the initial line of formatted text while keeping the rest left justified using just CSS?

I need help with formatting existing data without using JavaScript. The goal is to make the first line bold and centered, while the rest of the lines should be justify formatted. However, I'm having trouble achieving this as either the first line gets ...

htmlcss

Utilizing React-Input-Mask (written in TypeScript) to conceal Material UI input within Formik forms

Issue with Formik Input and TextField Type Error <InputMask mask="99/99/9999" value={formik.values.phone} onChange={formik.handleChange} onBlur={formik.handleBlur} > {(inputProps: Pro ...

reactjstypescriptmaskformik

What is the method for aligning a button label to the left and an icon to the right?

I have a list of items and I want to display label text on the left and a check icon on the right. This works fine when the text is short, but when I added the textOverflow property, the icon gets hidden along with the rest of the text. Here is my list ...

htmlcssreactjs