library_books<style>
*{box-sizing:border-box;}
#progressbar {
  width: 100%;
  height: 28px;
  background-color: #f3f3f3;
  text-align: center;
  line-height: 28px;
}
#pbar {
  width: 1%;
  height: 100%;
  background-color: #cddc39;
  color:white;
}
</style>

<script src="jquery.min.js"></script>

<div id="progressbar">
  <div id="pbar"></div>
</div>

<script>
var w=0;
$("#progressbar").click(function pbar(){
  if(w<100) {
    w++;
    $("#pbar").css("width",w+"%").text(w+"%");
    setTimeout(pbar,30);
  }
});
</script>

library_books<style>
*{box-sizing:border-box;}
#progressbar {
  width: 100%;
  height: 28px;
  background-color: #f3f3f3;
  text-align: center;
  line-height: 28px;
}
</style>

<script src="jquery.min.js"></script>

<div id="progressbar"></div>

<script>
var w=100;
$("#progressbar").css("background","linear-gradient(to right,#29b6f6 "+w+"%, #f3f3f3 0%)");
$("#progressbar").click(function pbar(){
  if(w>-1) {
    $("#progressbar").css("background","linear-gradient(to right, #29b6f6 "+w+"%, #f3f3f3 0%)");
    $("#progressbar").text(w+"%");
    w--;
    setTimeout(pbar,30);
  }
});
</script>

library_books<style>
*{box-sizing:border-box;}
#cbar {
  border: 14px solid #f3f3f3;    
  border-radius: 50%;
  width: 111px;
  height: 111px;
  text-align:center;
  padding:27px 0;
  display: inline-block;
  margin-top:8px;
}
</style>

<script src="jquery.min.js"></script>

<div id="cbar">Click !</div>

<script>
var w=0;
$("#cbar").click(function cbar(){
  if(w<100) {
    w++;
    $("#cbar").css("background","linear-gradient(to top, #29b6f6 "+w+"%,white 0%)");
    $("#cbar").text(w+"%");
    setTimeout(cbar,30);
  }
});
</script>

library_books<style>
*{box-sizing:border-box;}
#cbar {
  border: 14px solid #f3f3f3;    
  border-radius: 50%;
  width: 111px;
  height: 111px;
  text-align:center;
  padding:27px 0;
  display: inline-block;
  margin-top:8px;
}
</style>

<script src="jquery.min.js"></script>

<div id="cbar">Click !</div>

<script>
var w=0;
$("#cbar").click(function cbar(){
  if(w<100) {
    w++;
    $("#cbar").css("background","radial-gradient(circle,#29b6f6 "+(w*.75)+"%,white 0%)");
    $("#cbar").text(w+"%");
    setTimeout(cbar,30);
  }
});

// (w*.75) means border occupies approx 25% of the width (28px in 111px). 
//  so we calculate 100% progress in 75% of the width
</script>