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:

Features

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.

Options

Styles

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.

Date

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.

Day/Month/Year

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.

Icon

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.

Language

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.

Example

More examples of usage can be found on our demos site