Timer Bars in CSS with Custom Properties

Recently I need to implement a visible timer in the project, and there is already a similar timer UI design in the project as a reference. Users do not need to see the number decreasing, but rather want to see a "bar" gradually decrease from full to empty. I mentioned this because there are many ways to implement the "timer" UI. This article is not about all of these methods (the search results on CodePen would be more helpful), but rather about one that works very well for me.

The type of timer I need is what is called the "turn time" bar in the project. Performing an action may trigger turn time, and most subsequent actions will be blocked until the end of the turn time. Therefore, a clear red bar timer is the right UI choice. It gives people a sense of rhythm and flow, you can "feel" the end time of the timer and schedule your next operation.

Setting this timer is quite easy...

Let's create a parent/child element structure in case we need to style the empty parts of the container in the future.

<div>
  <div></div>
</div>

Now, we only style the inner bars.

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

This gives us a nice red bar that can be used as a time indicator.

Next, we need to let it count down, but here we need to consider functionality. Such a timer needs to know how long it takes! We can provide this information directly in HTML. This doesn't mean we avoid using JavaScript - we're embracing it. We are saying, "Hey, JavaScript, please give us a duration variable and we'll handle the rest."

<div style="--duration: 5;">
  <div></div>
</div>

In fact, this approach is very suitable for modern DOM handling JavaScript. As long as --variable is correct, it can re-render the DOM element at any time, and we can make sure the design handles this situation well. We will make a variation like this.

Now, let's start the animation. The good news is, it's simple. This is a single line keyframe:

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

We can "compress" the bar because the style of the bar doesn't look compressed when we scale horizontally. If we do this, we can animate the width. This is not that big of a problem, especially since it won't readjust the layout of 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 use the --duration variable to set the animation duration? This accomplishes most of the work. I also use it to set the same number of steps() so that it decrements "grid by grid". "Bid-by-frame" may be a visual UI effect you like (I like), but it also adapts to the idea that JavaScript may re-render this bar at any time, and Bid-by-frame makes it unlikely to notice. I used an integer as the duration value so that it could both use it like this.

However, if you want a smooth animation, we can do this, for example:

<div ...="" data-style="smooth"></div>

Then don't use steps :

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

Note that we also use linear animations, which seems to make sense for the timer. Time, like it, will not ease. Or will it? Anyway, this is your choice. If you want a timer that looks like acceleration or deceleration at certain points, go for it.

We can use the same data-attribute -based API to implement color changes:

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

The last variant is to fix the width of each "second". This way, a 10-second timer will look longer than a 5-second timer:

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

Here is a demonstration:

Pay attention to the tips for restarting CSS animations.

Oh, by the way, I know there is one<meter></meter> Element, it may be more semantic, but its own UI cannot be animate as I want here - at least not to fight it. But I don't know if it's more accessible? Does it declare its current value in a useful way? If we use JavaScript to update in real time<meter></meter> , would it be a more accessible timer? If anyone knows, I can link a solution here.

The above is the detailed content of Timer Bars in CSS with Custom Properties. For more information, please follow other related articles on the PHP Chinese website!