Tag: Timer

Timer Bars in CSS with Custom Properties

I was working on a thing the other day that needed a visible timer. There was UI precedent for this type of timer on the project. People didn’t want to see numbers ticking downward; it was more ideal to see a “bar” drain away from full to empty. I mention that because there are tons and tons of ways you could approach a “timer” UI. This isn’t an exploration of all of those (a search on CodePen would be more helpful there), but an exploration of the one way that was useful to me.

The kind of timer I needed was what the project called a “round time” bar. An action is performed. It may cause a round time, and most further actions are blocked until the round time is over. So, a very clear red bar that ticks away was the right UI. It gives a sense of rhythm and flow where you can kinda feel the end of the timer and time your next action.

a linear animation that shrinks the bar to zero.

Setting this up is fairly easy…

Let’s give ourselves a parent/child thing, just in case we want to style the empty part of the container at some point.

<div class="round-time-bar">   <div></div> </div>

For now, let’s just style the bar inside.

.round-time-bar div {   height: 5px;   background: linear-gradient(to bottom, red, #900); }

That gives us a nice little red bar we can use for the time indicator.

Next we need to make it tick down, but here’s where we need to think about functionality. A timer like this needs to know how long it’s timing! We can give it that information right in the HTML. This doesn’t mean we’re avoiding JavaScript — we’re embracing it. We’re saying, “hey JavaScript, please give us the duration as a variable and we’ll take it from there.”

<div class="round-time-bar" style="--duration: 5;">   <div></div> </div>

In fact, this way is very friendly to modern DOM-handling JavaScript. As long as that --variable is correct, it is free to re-render that DOM element at any time and we can make sure the design handles that just fine. We’ll make a variation that does that.

For now, let’s make the animation happen. Good news, it’s easy. Here’s a one-liner keyframe:

@keyframes roundtime {   to {     /* More performant than animating `width` */     transform: scaleX(0);   } }

We can “squish” the bar because the design of the bar doesn’t have anything that will look squished when we scale it horizontally. If we did, we could animate the width. It’s not that big of a deal, especially since it doesn’t reflow anything else.

Now we apply it to the bar:

.round-time-bar div {   /* ... */   animation: roundtime calc(var(--duration) * 1s) steps(var(--duration)) forwards;   transform-origin: left center; }

See how we’re yanking that --duration variable to set the duration of the animation? That does the heavy lifting. I’m also using it to set the same number of steps() so it “ticks” down. That “ticking” might be a visual UI thing that you like (I do), but it also accommodates the idea that JavaScript might re-render this bar at any time, and the ticks make it so you are less likely to notice. I used an integer for the duration value so that it could do double-duty like this.

If you want a smooth animation though, we could do that as a variation, like:

<div class="round-time-bar" data-style="smooth" ... />

Then not do the steps:

.round-time-bar[data-style="smooth"] div {   animation: roundtime calc(var(--duration) * 1s) linear forwards; }

Note we’re also using a linear animation, which seems to make sense for a timer. Time, as it were, doesn’t ease. Or does it? Whatever, it’s your call. If you want a timer that appears to speed up or slow down at certain points, go for it.

We can use the same variation data-attribute-driven API for things like color variations:

.round-time-bar[data-color="blue"] div {   background: linear-gradient(to bottom, #64b5f6, #1565c0); }

And one final variation is making each “second” a fixed width. That way, a 10 second timer will literally look longer than a 5 second timer:

.round-time-bar[data-style="fixed"] div {   width: calc(var(--duration) * 5%); }

Here’s the demo:

Notice the little trick in there for restarting CSS animation.

Oh, and hey, I know there is a <meter> element which is maybe a bit more semantic, but it brings it’s own UI which isn’t animatable like I wanted things to be here — at least not without fighting it. But I wonder if it’s more accessible? Does it announce its current value in a useful way? Would it be a more accessible timer if we were updating a <meter> in real-time with JavaScript? If anyone knows, I can link up a solution here.


The post Timer Bars in CSS with Custom Properties appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , ,

How to Create an Animated Countdown Timer With HTML, CSS and JavaScript

Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more straightforward to make one than you might think and only requires the trifecta of HTML, CSS and JavaScript. Let’s make one together!

This is what we’re aiming for:

Here are a few things the timer does that we’ll be covering in this post:

  • Displays the initial time remaining
  • Converts the time value to a MM:SS format
  • Calculates the difference between the initial time remaining and how much time has passed
  • Changes color as the time remaining nears zero
  • Displays the progress of time remaining as an animated ring

OK, that’s what we want, so let’s make it happen!

Step 1: Start with the basic markup and styles

Let’s start with creating a basic template for our timer. We will add an svg with a circle element inside to draw a timer ring that will indicate the passing time and add a span to show the remaining time value. Note that we’re writing the HTML in JavaScript and injecting into the DOM by targeting the #app element. Sure, we could move a lot of it into an HTML file, if that’s more your thing.

document.getElementById("app").innerHTML = ` <div class="base-timer">   <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">     <g class="base-timer__circle">       <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45" />     </g>   </svg>   <span>     <!-- Remaining time label -->   </span> </div> `;

Now that we have some markup to work with, let’s style it up a bit so we have a good visual to start with. Specifically, we’re going to:

  • Set the timer’s size
  • Remove the fill and stroke from the circle wrapper element so we get the shape but let the elapsed time show through
  • Set the ring’s width and color
/* 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; }

Having that done we end up with a basic template that looks like this.

Step 2: Setting up the time label

As you probably noticed, the template includes an empty <span> that’s going to hold the time remaining. We will fill that place with a proper value. We said earlier that the time will be in MM:SS format. To do that we will create a method called formatTimeLeft:

function formatTimeLeft(time) {   // The largest round integer less than or equal to the result of time divided being by 60.   const minutes = Math.floor(time / 60);      // Seconds are the remainder of the time divided by 60 (modulus operator)   let seconds = time % 60;      // If the value of seconds is less than 10, then display seconds with a leading zero   if (seconds < 10) {     seconds = `0$ {seconds}`;   }    // The output in MM:SS format   return `$ {minutes}:$ {seconds}`; }

Then we will use our method in the template:

document.getElementById("app").innerHTML = ` <div class="base-timer">   <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">     <g class="base-timer__circle">       <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>     </g>   </svg>   <span id="base-timer-label" class="base-timer__label">     $ {formatTime(timeLeft)}   </span> </div> `

To show the value inside the ring we need to update our styles a bit.

.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; }

OK, we are ready to play with the timeLeft  value, but the value doesn’t exist yet. Let’s create it and set the initial value to our time limit.

// Start with an initial value of 20 seconds const TIME_LIMIT = 20;  // Initially, no time has passed, but this will count up // and subtract from the TIME_LIMIT let timePassed = 0; let timeLeft = TIME_LIMIT;

And we are one step closer.

Right on! Now we have a timer that starts at 20 seconds… but it doesn’t do any counting just yet. Let’s bring it to life so it counts down to zero seconds.

Step 3: Counting down

Let’s think about what we need to count down the time. Right now, we have a timeLimit value that represents our initial time, and a timePassed value that indicates how much time has passed once the countdown starts.

What we need to do is increase the value of timePassed by one unit per second and recompute the timeLeft value based on the new timePassed value. We can achieve that using the setInterval function.

Let’s implement a method called startTimer that will:

  • Set counter interval
  • Increment the timePassed value each second
  • Recompute the new value of timeLeft
  • Update the label value in the template

We also need to keep the reference to that interval object to clear it when needed — that’s why we will create a timerInterval variable.

let timerInterval = null;  document.getElementById("app").innerHTML = `...`  function startTimer() {   timerInterval = setInterval(() => {          // The amount of time passed increments by one     timePassed = timePassed += 1;     timeLeft = TIME_LIMIT - timePassed;          // The time left label is updated     document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);   }, 1000); }

We have a method that starts the timer but we do not call it anywhere. Let’s start our timer immediately on load.

document.getElementById("app").innerHTML = `...` startTimer();

That’s it! Our timer will now count down the time. While that’s great and all, it would be nicer if we could add some color to the ring around the time label and change the color at different time values.

Step 4: Cover the timer ring with another ring

To visualize time passing, we need to add a second layer to our ring that handles the animation. What we’re doing is essentially stacking a new green ring on top of the original gray ring so that the green ring animates to reveal the gray ring as time passes, like a progress bar.

Let’s first add a path element in our SVG element.

document.getElementById("app").innerHTML = ` <div class="base-timer">   <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">     <g class="base-timer__circle">       <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>       <path         id="base-timer-path-remaining"         stroke-dasharray="283"         class="base-timer__path-remaining $ {remainingPathColor}"         d="           M 50, 50           m -45, 0           a 45,45 0 1,0 90,0           a 45,45 0 1,0 -90,0         "       ></path>     </g>   </svg>   <span id="base-timer-label" class="base-timer__label">     $ {formatTime(timeLeft)}   </span> </div> `;

Next, let’s create an initial color for the remaining time path.

const COLOR_CODES = {   info: {     color: "green"   } };  let remainingPathColor = COLOR_CODES.info.color;

Finally, let’s add few styles to make the circular path look like our original gray ring. The important thing here is to make sure the stroke-width is the same size as the original ring and that the duration of the transition is set to one second so that it animates smoothly and corresponds with the time remaining in the time label.

.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); }

This will output a stroke that covers the timer ring like it should, but it doesn’t animate just yet to reveal the timer ring as time passes.

To animate the length of the remaining time line we are going to use the stroke-dasharray property. Chris explains how it’s used to create the illusion of an element “drawing” itself. And there’s more detail about the property and examples of it in the CSS-Tricks almanac.

Step 5: Animate the progress ring

Let’s see how our ring will look like with different stroke-dasharray values:

What we can see is that the value of stroke-dasharray is actually cutting our remaining time ring into equal-length sections, where the length is the time remaining value. That is happening when we set the value of stroke-dasharray to a single-digit number (i.e. 1-9).

The name dasharray suggests that we can set multiple values as an array. Let’s see how it will behave if we set two numbers instead of one; in this case, those values are 10 and 30.

stroke-dasharray: 10 30

That sets the first section (remaining time) length to 10 and the second section (passed time) to 30. We can use that in our timer with a little trick. What we need initially is for the ring to cover the full length of the circle, meaning the remaining time equals the length of our ring.

What’s that length? Get out your old geometry textbook, because we can calculate the length an arc with some math:

Length = 2πr = 2 * π * 45 = 282,6

That’s the value we want to use when the ring initially mounted. Let’s see how it looks.

stroke-dasharray: 283 283

That works!

OK, the first value in the array is our remaining time, and the second marks how much time has passed. What we need to do now is to manipulate the first value. Let’s see below what we can expect when we change the first value.

We will create two methods, one responsible for calculating what fraction of the initial time is left, and one responsible for calculating the stroke-dasharray value and updating the <path> element that represents our remaining time.

// Divides time left by the defined time limit. function calculateTimeFraction() {   return timeLeft / TIME_LIMIT; }      // Update the dasharray value as time passes, starting with 283 function setCircleDasharray() {   const circleDasharray = `$ {(     calculateTimeFraction() * FULL_DASH_ARRAY   ).toFixed(0)} 283`;   document     .getElementById("base-timer-path-remaining")     .setAttribute("stroke-dasharray", circleDasharray); }

We also need to update our path each second that passes. That means we need to call the newly created setCircleDasharray method inside our timerInterval.

function startTimer() {   timerInterval = setInterval(() => {     timePassed = timePassed += 1;     timeLeft = TIME_LIMIT - timePassed;     document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);          setCircleDasharray();   }, 1000); }

Now we can see things moving!

Woohoo, it works… but… look closely, especially at the end. It looks like our animation is lagging by one second. When we reach 0 a small piece of the ring is still visible.

This is due to the animation’s duration being set to one second. When the value of remaining time is set to zero, it still takes one second to actually animate the ring to zero. We can get rid of that by reducing the length of the ring gradually during the countdown. We do that in our calculateTimeFraction method.

function calculateTimeFraction() {   const rawTimeFraction = timeLeft / TIME_LIMIT;   return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction); }

There we go!

Oops… there is one more thing. We said we wanted to change the color of the progress indicator when when the time remaining reaches certain points — sort of like letting the user know that time is almost up.

Step 6: Change the progress color at certain points of time

First, we need to add two thresholds that will indicate when we should change to the warning and alert states and add colors for each of that states. We’re starting with green, then go to orange as a warning, followed by red when time is nearly up.

// Warning occurs at 10s const WARNING_THRESHOLD = 10; // Alert occurs at 5s const ALERT_THRESHOLD = 5;  const COLOR_CODES = {   info: {     color: "green"   },   warning: {     color: "orange",     threshold: WARNING_THRESHOLD   },   alert: {     color: "red",     threshold: ALERT_THRESHOLD   } };

Now, let’s create a method that’s responsible for checking if the threshold exceeded and changing the progress color when that happens.

function setRemainingPathColor(timeLeft) {   const { alert, warning, info } = COLOR_CODES;    // If the remaining time is less than or equal to 5, remove the "warning" class and apply the "alert" class.   if (timeLeft <= alert.threshold) {     document       .getElementById("base-timer-path-remaining")       .classList.remove(warning.color);     document       .getElementById("base-timer-path-remaining")       .classList.add(alert.color);    // If the remaining time is less than or equal to 10, remove the base color and apply the "warning" class.   } else if (timeLeft <= warning.threshold) {     document       .getElementById("base-timer-path-remaining")       .classList.remove(info.color);     document       .getElementById("base-timer-path-remaining")       .classList.add(warning.color);   } }

So, we’re basically removing one CSS class when the timer reaches a point and adding another one in its place. We’re going to need to define those classes.

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

Voilà, there we have it. Here’s the demo again with everything put together.

The post How to Create an Animated Countdown Timer With HTML, CSS and JavaScript appeared first on CSS-Tricks.

CSS-Tricks

, , , , ,
[Top]