Extensions

Search Extensions

Event Progress Bar

๐Ÿ‘‹ Note: This extension is only compatible with the updated view styles that were introduced with The Events Calendar 5.0.

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 Containter

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.0
    • November 9, 2020
    • Initial release

 

Download Extension

๐Ÿ‘‹ Heads up! We provide limited support for extensions, but you can still open a ticket over at our Help Desk to report any issues.
Install Instructions