Is it possible to create a circular border using CSS where x% of it is red and the remaining percentage is white? The value of x is defined as a state variable in a JavaScript file

Currently, I am developing a timer application where there is an initial white ring surrounding the remaining time. My goal is to gradually change the color of the outer ring to red as the time progresses, ultimately turning completely red when the time runs out.

<div className="countdown-timer">
     <span>{remainingTime.hours}</span>
     <span>:</span>
     <span>{remainingTime.minutes}</span>
     <span>:</span>
     <span>{remainingTime.seconds}</span>
</div>

.countdown-timer {
    width: 400px;
    height: 400px;
    border: 6px solid white;
    border-radius: 50%;
    box-shadow: black;

    font-family: "DM Sans";
    font-size: 72px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

Despite trying a concentric circle approach, I did not achieve the desired effect.

This is the visual representation I am aiming for: https://i.sstatic.net/AVOz3.png

cssreactjs

Answer №1

Consider using conic-gradient

function Timer() {
  const [remainingTime, setRemainingTime] = React.useState({
    hours: 0,
    minutes: 0,
    seconds: 0
  });
  return ( <
    div className = "countdown-timer"
    style = {
      {
        "--x": 0.75
      }
    } >
    <
    span > {
      remainingTime.hours
    } < /span> <
    span >: < /span> <
    span > {
      remainingTime.minutes
    } < /span> <
    span >: < /span> <
    span > {
      remainingTime.seconds
    } < /span> <
    /div>
  );
}
ReactDOM.createRoot(document.getElementById("app")).render( < Timer / > );
:root {
  --bg: purple;
}

body {
  background: var(--bg);
}

.countdown-timer {
  width: 400px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: black;
  font-family: "DM Sans";
  font-size: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  --x: 0;
  --deg: calc(calc(1 - var(--x)) * 360deg);
  background: conic-gradient(white 0deg, white var(--deg), var(--deg), red 360deg);
}

.countdown-timer::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background-color: var(--bg);
}

.countdown-timer span {
  position: relative;
  z-index: 1;
}
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

Answer №2

<div>
  {If the remaining time is greater than X.time?(
  <div className="countdown-timer">
      <span>{remainingTime.hours}</span>
      <span>:</span>
      <span>{remainingTime.minutes}</span>
      <span>:</span>
      <span>{remainingTime.seconds}</span>
  </div>):(
    <div className="countdown-timer2">
      <span>{remainingTime.hours}</span>
      <span>:</span>
      <span>{remainingTime.minutes}</span>
      <span>:</span>
      <span>{remainingTime.seconds}</span>
  </div>

  )
  }
</div>

---------------------------Unique CSS File----------------------------------------

.countdown-timer {
    width: 400px;
    height: 400px;
    border: 6px solid white;
    border-radius: 50%;
    box-shadow: black;

    font-family: "DM Sans";
    font-size: 72px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.countdown-timer2 {
    width: 400px;
    height: 400px;
    border: 6px solid white;
    border-radius: 50%;
    box-shadow: black;
    border-color: red;

    font-family: "DM Sans";
    font-size: 72px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

where X.time represents the threshold for color change, with white indicating above and red indicating below that value.

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

Positioning two divs side by side, with two more below in the following row

I am attempting to align multiple div elements with a width relative to the screen size. However, when I try to float them next to each other, they shift to the right and display under each other. I have experimented with applying display: inline-block; a ...

htmlcss

Utilizing component together with connect() - Unable to access property 'displayName' as it is not defined

I'm facing a peculiar issue involving the 'connect' function and a presentational component import React from 'react'; import { withRouter } from 'react-router'; import { connect } from 'react-redux'; import * ...

reactjsecmascript-6redux

What is the process of displaying text within a link?

I have a basic webpage where I want the text to display from a link. Here is my website: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Encyclopedia</title> <link href="test.css" re ...

javascriptcsshtml

Implementing a custom focus effect for MuiLink

I am looking to customize the appearance of the focusVisible property for all the (material ui) Links in my application. I am aware that I can achieve this by: const useStyles = makeStyles(() => ({ focus: { backgroundColor: 'yellow', ...

reactjsmaterial-ui

Is it possible to display the triangle external to the container element?

I'm currently working on creating a CSS menu. My goal is to have a triangle of a specific size appear next to the container when the li element has a class of active. To see an example, check out the following http://jsfiddle.net/hcabnettek/MeczJ/ Wh ...

csshtmlgeometry

Exporting Data and Utilizing a Steady Data Table

I have incorporated the Fixed Data Grid into my latest project. https://facebook.github.io/fixed-data-table/example-sort.html My goal is to generate csv and pdf reports from the data displayed on the grid. Could you please advise me on how to export gri ...

javascriptjqueryreactjsfixed-data-table

Utilizing TailwindCSS animations for dynamically displayed components in React

Is there a way to animate the transition of a component between its open and closed states in React using TailwindCSS when conditionally rendering based on state? {successMessage && ( <div className="flex transition-all ease-i ...

javascriptcssreactjsnext.jstailwind-css

The mobile menu in bootstrap is stationary while the background scrolls instead of the menu

I recently completed a website using Bootstrap, and everything seems to be working well on desktop. However, I am facing an issue when loading the site on mobile devices. The menu is not scrolling properly when opened, making it difficult to view all the o ...

htmlcssbootstrap-4menutoggle

Enhancing Security: Implementing Node.js API Authentication

Looking for guidance on setting up multiple authentications with different roles in Next.js development. Can anyone help me navigate this aspect of website building? Using Next.js for the frontend Utilizing Node.js and JWT (JSON web token) for the backend ...

javascriptreactjsnext.js

What would be the optimal type for the second argument of the `simulate` method?

When using the simulate function, I am familiar with code like this: simulate("change", { target: { value: '7' } }); However, if my onChange function requires an object as a parameter, what should I pass in the second argument? interface myObj ...

javascriptreactjstypescriptjestjsenzyme

What is the best way to customize the renderItem method in React Native's SectionList to be based on sections instead of

I've been exploring the FB docs and came across a mention of being able to override the default item-based renderItem method with a section-based render in the SectionList component in React Native. However, I'm struggling to find a way to actual ...

iosreactjsreact-nativefacebook

Is it possible to utilize a single MobX store across two distinct components within a React Native application?

I am working on a module that includes a topTabNavigator wrapped with mobx provider using the store: export class ModuleTeam extends Component { render() { return ( <Provider store={store}> <TopTabNavigator /> </Pr ...

reactjsreact-nativestoremobxmobx-react

Tips for showcasing numerous images in a single row on a website

Looking to organize images into rows with 3/4 images in each row, not stacked vertically as shown below. Here is the code I have tried: <html> <head> <title>Images Displayed in Rows</title> <meta charset="utf-8"> <meta ...

phphtmlcsstwitter-bootstrap

What is the best way to combine node-sass and sass-autoprefixer in a project?

I'm struggling to implement the code in my package.json. Here is the code snippet: { "name": "nodesass", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "node-sass": "^4.11.0" }, "devDependencies": ...

javascriptcssnpmsasspackage.json

Adjust the color of the icon depending on the value

I am new to Angular2 and I'm looking for a way to dynamically change the CSS of an icon based on specific values. Here is the code in HTML: <li><i class="fa fa-check" [style.color]="'switch(types)'"></i>{{ types }}</l ...

htmlcssangulartypescriptng-class

Utilizing a React component as a function: A step-by-step guide

I am looking to implement a material ui dialog that can handle the result from JavaScript for a simple yes/no prompt. This is how I envision it working: <MyPromptComponent /> { MyPromptComponent.show('Do you really want to?').then((res ...

reactjscomponentsmaterial-ui

What is the best way to resize an image within a dynamic-sized div?

Is there a way to resize an image that is set by percentage in a dynamically sized div? Currently, I am facing an issue where the layout looks perfect without the image, but breaks when the image is added. I want all units to be consistent and find a solut ...

htmlcssweb

Customized Hero Component for NextJS/Tailwind with multiple background images based on screen size

Struggling with creating a dynamic hero component that adjusts its image based on screen size as part of a challenge. Using a background image approach but hitting a roadblock. Managed to set static images for each breakpoint individually, but encounterin ...

reactjsnext.jstailwind-css

What is the method for obtaining two distinct values from a select element?

I am looking to break apart a string and save the segments into different variables. Within my code, there is an array named "referti". [ {referti.hash_referto}, {referti.data_esame}, {referti.tipo_esame}] To display this list of elements in a select dr ...

javascriptreactjs

How can I implement code splitting in a React single page application?

I've developed a large application using reactjs and redux. My main concern is how can I minimize the page size? I am aware of code splitting in webpack, but my impression is that it's mainly for multi-page applications. In my case, I only have ...

reactjswebpack