Edit in JSFiddle

var timerElement = $('h1[id^="timerElement"]'),
status_btn = $('#status'),
clear = $('#clear'),
progressBar = $('#progressBar'),
dashboardPanel = $('#dashboardPanelTimer'),
pregressIterator = 0,
progressValue = 100,
seconds = 0, minutes = 25,
status = "paused",
t;


/* function that runs the timer and progress bar updates */
function decrease() {
    if (status == "running"){
        /* end timer if timer is done */
        if (minutes == 0 && seconds == 0) {
            writePomoCount();
            progressBar.attr({"style" : "width: 100%;"});
            progressBar.attr({"class" : "progress-bar progress-bar-striped active"});
            dashboardPanel.attr({"class" : "col-xs-6 panel panel-primary"});
            return;
        }
        /* decrease timer and update website */
        seconds--;
        if (seconds < 0) {
            seconds = 59;
            minutes--;
            if (minutes < 0) {
                minutes = 59;
            }
        }
        timerElement.text((minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds));

        /* reduce progress bar on website every 15 seconds by 1% */
        pregressIterator ++;
        if (pregressIterator >= 15) {
          pregressIterator = 0;
          progressValue -= 1;
          progressBar.attr({"style" : "width: " + progressValue + "%;"});
          if (progressValue <= 20) {
            progressBar.attr({"class" : "progress-bar progress-bar-warning"});
            dashboardPanel.attr({"class" : "col-xs-6 panel panel-warning"});
        }
        if (progressValue <= 12) {
            progressBar.attr({"class" : "progress-bar progress-bar-danger"});
            dashboardPanel.attr({"class" : "col-xs-6 panel panel-danger"});
        }
    }


    timer();
}
}
function timer() {
    t = setTimeout(decrease, 1000);
}
timer();


/* Status button to pause and restart the timer */
status_btn.click(function () {
    if (status == "paused") {
        status = "running";
        timer();
        status_btn.html("<i class=\"fa fa-pause fa-fw\"></i>");
    } else if (status == "running") {
    	status = "paused";
        clearTimeout(t);
        status_btn.html("<i class=\"fa fa-play fa-fw\"></i>");
    }
    this.blur();
});

/* Clear button to set timer to starting position and status again */
clear.click(function() {
    timerElement.text("25:00");
    seconds = 0; minutes = 25;
    status = "paused";
    status_btn.html("<i class=\"fa fa-play fa-fw\"></i>");
    pregressIterator = 0,
    progressValue = 100,
    progressBar.attr({"style" : "width: " + progressValue + "%;"});
    progressBar.attr({"class" : "progress-bar progress-bar-success"});
    dashboardPanel.attr({"class" : "col-xs-6 panel panel-success"});
    this.blur();
});
<div class="progress">
          <div id="progressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
          </div>
</div>

<div class="container">
<div class="row">
<label type="button" class="btn btn-default" id="status"><i class="fa fa-play fa-fw"></i></label>
<label type="button" class="btn btn-default" id="clear"><i class="fa fa-trash fa-fw"></i></label>
</div>

<div class="row">
<div class="col-xs-6 panel panel-default" id="dashboardPanelTimer">
            <div class="panel-content">
              <div class="row">
                <div class="col-xs-12 text-right">
                  <h1 id="timerElement">25:00</h1>
                </div>
              </div>
            </div>
          </div> <!-- end row -->
          </div> <!-- end container -->