style.css

body {
    font-family: sans-serif;
    display: grid;
    height: 100vh;
    place-items: center;
  }

/* Sets the containers height and width */
.base-timer {
    position: relative;
    height: 300px;
    width: 300px;
}

/* Removes SVG styling that would hide the time label */
.base-timer__circle {
fill: none;
stroke: none;
}

/* The SVG path that displays the timer's progress */
.base-timer__path-elapsed {
stroke-width: 7px;
stroke: grey;
}

.base-timer__label {
position: absolute;

/* Size should match the parent container */
width: 300px;
height: 300px;

/* Keep the label aligned to the top */
top: 0;

/* Create a flexible box that centers content vertically and horizontally */
display: flex;
align-items: center;
justify-content: center;

/* Sort of an arbitrary number; adjust to your liking */
font-size: 48px;
}

.base-timer__path-remaining {
/* Just as thick as the original ring */
stroke-width: 7px;

/* Rounds the line endings to create a seamless circle */
stroke-linecap: round;

/* Makes sure the animation starts at the top of the circle */
transform: rotate(90deg);
transform-origin: center;

/* One second aligns with the speed of the countdown timer */
transition: 1s linear all;

/* Allows the ring to change color when the color value updates */
stroke: currentColor;
}

.base-timer__svg {
/* Flips the svg and makes the animation to move left-to-right */
transform: scaleX(-1);
}

.base-timer__path-remaining.green {
    color: rgb(65, 184, 131);
  }
  
  .base-timer__path-remaining.orange {
    color: orange;
  }
  
  .base-timer__path-remaining.red {
    color: red;
  }