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() {
                 clearInterval(timer);
                 oProgressIndicator.setPercentValue(0);
                 oLabelTimeLeft.setText("00:00");
         }});
  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",});
  oProgressIndicatorMatrixLayout.createRow(oProgressIndicator);
  oProgressIndicatorMatrixLayout.createRow(oLabelTimeLeft);
  //Add elements to the panel
  oPanel.addContent(oButtonMatrixLayout);
  oPanel.addContent(oProgressIndicatorMatrixLayout);
  //Attach the panel to the page
  oPanel.placeAt("content");

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){
            oProgressIndicator.setPercentValue(newPercent);
            //Change bar color to negative in last 30 seconds
            if(newPercent <= 25){
                 oProgressIndicator.setBarColor(sap.ui.core.BarColor.NEGATIVE);
            }
            //Change bar color to critical in last 1 minute
            else if(newPercent <= 50){
                 oProgressIndicator.setBarColor(sap.ui.core.BarColor.CRITICAL);
            }
            //Update current time left
            oLabelTimeLeft.setText(minutes + ":" + seconds);
       } else {
            //Stop timer after 2 minutes
            clearInterval(timer);
       }
  }

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.