Bootstrap snippet and html example. Refresh Widget

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="container bootstrap snippets bootdey">
    <!--refresh widget-->
        <div class="panel panel-info"> 
            <div class="panel-heading">
            <h1>
            <span class="glyphicon glyphicon-th"></span>
            <a class="refresh pull-right" href="#"><span class="fa fa-refresh"></span></a> <strong>Refresh Widget</strong>
             </h1>    
            </div>
          <div class="panel-body panel-refresh">
         	<div class="refresh-container"><i class="refresh-spinner fa fa-spinner fa-spin fa-5x"></i></div>
            <h4>Refresh Me: Please click on the refresh button </h4>
              <div class="jumbotron"> 
                This widget utilizes the simple <strong>$.refreshMe()</strong> plugin!
              </div>
              <div class="refresh-data"> 
              	This is the original data that will update upon refresh..
              </div>
          </div>
        </div>
    <!--refresh widget-->
</div>

.panel-refresh {
 height:250px;
 position:relative;
}
 
.refresh-container {
 position:absolute;
 top:0;
 right:0;
 background:rgba(200,200,200,0.25);
 width:100%;
 height:100%;
 display: none;
 text-align:center;
 z-index:4;
}
.refresh-spinner {
 padding: 30px;
 opacity: 0.8;
}

$.fn.refreshMe = function(opts){
    var $this = this,
        defaults = {
          ms:1500,
          started:function(){},
          completed:function(){}
        },
        settings = $.extend(defaults, opts);
  
	var panelToRefresh = $this.parents('.panel').find('.refresh-container');
  	var dataToRefresh = $this.parents('.panel').find('.refresh-data');
  	var ms = settings.ms;
  	var started = settings.started;		//function before timeout
	var completed = settings.completed;	//function after timeout
    
  	$this.click(function(){
      $this.addClass("fa-spin");
      panelToRefresh.show();
      started(dataToRefresh);
      setTimeout(function(){
          completed(dataToRefresh);
          panelToRefresh.fadeOut(800);
          $this.removeClass("fa-spin");
      },ms);
      return false;
    })
}

$(document).ready(function(){
      
  $('.refresh').refreshMe({
    started:function(ele){ele.html("Getting new data..")},
  	completed:function(ele){ele.html("This is the new data after refresh..")}
  });
});