Skip to Content
Author's profile photo Former Member

Countdown Timer with SAPUI5 ProgressIndicator

I have been working on ProgressIndicator control to create a countdown timer from a given time. In this document I will be sharing the countdown timer developed using SAPUI5 ProgressIndicator control and jquery setInterval method.

First, I created a panel having ProgressIndicator, a Label to show remaining time, a Button to restart the timer and a Button to clear the progress bar and stop timer.

  //Timer for count down
  var timer = null;
  //Create a panel instance
  var oPanel = new sap.ui.commons.Panel({width: "350px", showCollapseIcon: false});
  //Set the title of the panel
  oPanel.setTitle(new sap.ui.core.Title({text: "Countdown Timer"}));
  //Create a matrixLayout instance for buttons
  var oButtonMatrixLayout = new sap.ui.commons.layout.MatrixLayout({height: "50px", layoutFixed: false});
  //Create button to restart count down timer
  var oButtonRestart = new sap.ui.commons.Button({text: 'Restart',
            press: function() {
                 clearInterval(timer); //Clear current timer running
                 oProgressIndicator.setBarColor(sap.ui.core.BarColor.NEUTRAL); //set bar color to NEUTRAL
                 oProgressIndicator.setPercentValue(100); //Set percent to 100(starting point)
                 oLabelTimeLeft.setText("02:00"); //Update label text value
                 timer = setInterval(startCountDown, interval); //start new timer
  //Create button to clear count down timer
  var oButtonClear = new sap.ui.commons.Button({text: 'Clear',
            press: function() {
  oButtonMatrixLayout.createRow(oButtonClear, oButtonRestart);
  //Create initial progress indicator
  var oProgressIndicatorMatrixLayout = new sap.ui.commons.layout.MatrixLayout({layoutFixed: false});
  var oProgressIndicator = new sap.ui.commons.ProgressIndicator("progressIndicator", {
       width: "300px",
       percentValue: 100,
       showValue: false
  //Label to show time left
  var oLabelTimeLeft = new sap.ui.commons.Label({text: "02:00",});
  //Add elements to the panel
  //Attach the panel to the page

The timer starts count down from 2 minutes. In every 1.2 seconds, timer runs and it updates the percent value of the ProgressIndicator. It also updates the bar color of the indicator based on the remaining time. If the remaining time is 1 minute, the bar color is set to CRITICAL and if it is 30 seconds, the color is set to NEGATIVE. When it reaches 0, the timer stops.

  var totalTime = 120000; //2 minutes
  var interval = 1200;
  timer = setInterval(startCountDown, interval);
  function startCountDown() {
       var percent = oProgressIndicator.getPercentValue();
       var newPercent = percent - 1;
       var timePassed = (totalTime * newPercent) / 100;
       timePassed = Math.floor(timePassed/1000);
       var seconds = (timePassed % 60); timePassed = Math.floor(timePassed/60);
       var minutes = (timePassed % 60); timePassed = Math.floor(timePassed/60);
       if(minutes.toString().length == 1){
            minutes = "0" + minutes;
       if(seconds.toString().length == 1){
           seconds = "0" + seconds;
       if(newPercent >= 0){
            //Change bar color to negative in last 30 seconds
            if(newPercent <= 25){
            //Change bar color to critical in last 1 minute
            else if(newPercent <= 50){
            //Update current time left
            oLabelTimeLeft.setText(minutes + ":" + seconds);
       } else {
            //Stop timer after 2 minutes

Below is the running example of countdown timer.


Countdown timer at the beginning


Countdown timer in last 1 minute


Countdown timer in last 30 seconds

You can access the entire code of coundown.view.js , countdown.html from github.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan

      Nice work Tugba Koc !  I went ahead and recreated your CountDown Timer example on jsbin JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;http://static.jsbin.…

      It works perfect! Thanks for sharing it 🙂



      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Chandrashekhar Mahajan and great idea to create it on jsbin to show the working example.