autoRefresh & ProgressBar

Bootstrap, BootstrapTheme und Jquery

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <div id="autoRefreshBar">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
            </div>
        </div>
    </div>

    <div class="btn-group" data-toggle="buttons">
        <a class="btn btn-default active" id="refreshButton" href="#"><i class="fa fa-refresh"></i></a>
        <button type="button" class="btn btn-default">
            <span class="toggle-switch toggle-switch-success">
                <label>
                    <input name="autoRefresh" id="autoRefresh" type="checkbox">
                    <span class="toggle-switch-inner"></span>
                    <span class="toggle-switch-switch"><i class="fa fa-history fa-flip-horizontal"></i></span>
                </label>
            </span>
        </button>
    </div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.min.css');
@import url('http://getbootstrap.com/dist/css/bootstrap-theme.min.css');

body{
    background: #415568;
    
}


.toggle-switch {
  display: block;
  position: relative;
  width: 60px; }
  .toggle-switch input {
    display: none; }
  .toggle-switch label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px; }

.toggle-switch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  -webkit-transition: margin 0.3s ease-in 0s;
  -moz-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s; }

.toggle-switch-inner:before,
.toggle-switch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 20px;
  padding: 0;
  line-height: 20px;
  font-size: 12px;
  text-shadow: 1px 1px 1px #FFFFFF;
  color: #929292;
  background-color: #F5F5F5;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); }

.toggle-switch-inner:before {
  content: "An";
  padding-left: 15px;
  -webkit-border-radius: 20px 0 0 20px;
  -moz-border-radius: 20px 0 0 20px;
  border-radius: 20px 0 0 20px; }

.toggle-switch-inner:after {
  content: "Aus";
  padding-right: 15px;
  text-align: right;
  -webkit-border-radius: 0 20px 20px 0;
  -moz-border-radius: 0 20px 20px 0;
  border-radius: 0 20px 20px 0; }

.toggle-switch-switch {
  display: block;
  width: 20px;
  margin: 0;
  border: 2px solid #d8d8d8;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 40px;
  color: #f8f8f8;
  line-height: 1em;
  text-shadow: 0 0px 1px #ADADAD;
  text-align: center;
 ...

JavaScript

$(document).ready(function () {
    
var RefreshBar = {
    counterCurrent: 0,
    intervalRef: null,
    settings: {
        doAutoRefresh: true,
        counterStart: 0,        
        counterMax: 120,
        refreshCallback: function() {
            console.log('irgendwas');
            //location.reload(true);
        }
    },
    init: function(options) {        
        if('object' === typeof options) {
            this.settings = $.extend({},this.settings,options);
        }
        this.resetProgress();        
        if($('#autoRefresh').size() > 0) {
            if($('#autoRefresh').is(':checked')) {
                this.settings.doAutoRefresh = true;
            }
            $('#autoRefresh').change(function(event){
                if($(this).is(':checked')) {
                    RefreshBar.settings.doAutoRefresh = true;
                    RefreshBar.start();
                } else {
                    RefreshBar.settings.doAutoRefresh = false;
                    RefreshBar.stop();
                }
            });
        }        
        if(this.settings.doAutoRefresh) {
            RefreshBar.start();
        }
    },
    start: function() {
        this.resetProgress();
        this.intervalRef = window.setInterval(function(){
            if(RefreshBar.settings.doAutoRefresh) {
                RefreshBar.counterCurrent++;
                if(RefreshBar.counterCurrent === RefreshBar.settings.counterMax) {
                    RefreshBar.doRefresh();
                } else {
                    RefreshBar.updateBar();
                }
            }
        },
        1000);
    },
    stop: function() {
        window.clearInterval(this.intervalRef);
        this.settings.doAutoRefresh = false;
        this.resetProgress();
    },
    resetProgress: function() {
        this.counterCurrent = this.settings.counterStart;
        this.updateBar();
    },
    updateBar: function() {
        var newValue = (this.counterCurrent * 100 /...