How can we help you today?

Countdown Design Element

Countdown Design Element Overview

Adding Countdown to SharePoint, Office 365 and SAP is easy and straightforward with ShortPoint. ShortPoint's Countdown Design Element is one of many available design elements and it allows you to easily create beautiful, animated countdown clocks to a future date. The Countdown clock can show days, hours, minutes and seconds remaining from the set date.

Starting from ShortPoint version 6.5.x.x for SharePoint Online (Office 365) and SharePoint 2019, and version 6.6.x.x for SharePoint on-premise 2013 and 2016, you will be able to enjoy more customization styles which are presented in this article.

Adding a Countdown to SharePoint, Office 365 and SAP Intranet Sites

The Countdown element can be easily added to your SharePoint and SAP pages using ShortPoint Page Builder:

Here is the Settings interface of the element:


The Countdown element supports custom dates, multiple languages, a wide variety of icons, multiple styles and dynamic data via connections. The Countdown element is also mobile-friendly and responsive.



You can select from 4 predefined styles for your countdown element, namely

1. Default 

2. Outline

3. Solid


4. Transparent

Count up

The Count up option allows you to count up from a past date and count to a future date. This option is disabled by default.


The Date option allows you to enter the date to count down to as one line of text. You can use this option or the Day/Month/Year option below.


There 3 option fields related to the date and all are required. The Countdown element requires a date to countdown to, so a future year, month and day of the month must be provided. If the date is past, the Countdown element will simply display 0, 0, 0 for hours, minutes, and seconds respectively, the remaining days will not be displayed.


ShortPoint provides a wide range of icons that can be added to the countdown to convey more meaning to your users. An icon is displayed in the Countdown by default, however, this behavior can be disabled with the Hide icon option.


Presently, the Countdown element supports 6 different languages, namely:

1. English

2. Ukrainian

3. Arabic

4. Spanish

5. Dutch

6. French

Hide and Show

The Hide and Show functionality allows you to hide parts of the displayed clock. For example, you could decide to hide the days part of the clock and display only the hours, minutes, and seconds. This is further illustrated in the screenshot below:

Styling and customization

The Countdown element can be further customized by changing the background color, icon color, text color, background transparency and text size.


More examples of usage can be found on our demos site

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 13 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more