Event Progress Bar

The Event Progress Bar extension will add a dynamic progress bar to the events that are currently happening showing how much time is left of the event. The progress bar is visible on the List view and on the Day view of the calendar.

The extension works with our free The Events Calendar plugin.

Customization

The look and feel of the progress bar can be fully customized with CSS. Here is a customization example.

We are going to customize the progress bar like this:

Let’s go step by step with explanations. We will go from the outside in.

The Container

This first block formats the container. We change the background color of the progress bar to blue. We give it a bit of padding to move the content away from the sides.

A little border radius makes the container less edgy and the white colored and bolded text will make it more legible.

.progress-bar-container.progress-bar-container {
    background-color: #334aff;
    padding: 5px 15px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
}

The Background

This second block of CSS will format the background behind the progress bar from light grey to a darker grey.

.progress-bar-container .progress-bar-container__background {
    background-color: #aaa;
}

The Progress Bar

In this third block we format the progress bar that grows with every second. We color it white and then we adjust the height and move it up a bit so that it fully covers the grey bar behind it. (Originally there is a 1px “frame” visible above and below the bar.)

.progress-bar-container .progress-bar-container__progressbar {
    background-color: #fff;
    margin-top: 0;
    height: 7px;
}

The “Ball”

In this block we format the “ball” at the end of the progress bar. We give it a nice 2px thick white border and a red color to make it stick out. Because of the added border we will need to adjust the position of the ball by decreasing the top and the left margin a bit. This will make sure that when the event is over the ball will not jump into the next line.

.progress-bar-container .progress-bar-container__ball {
    border: 2px solid #fff;
    background-color: #f00;
    margin-top: -3px;
    margin-left: -4px;
}

Changelog

Version 1.0.1
- December 2, 2021
- Make sure the extension uses the correct action hook names for v2.
Version 1.0.0
- November 9, 2020
- Initial release