jquery - I have rounded progress bar, how can I fill it depending on the occupied and vacant space? -

i have code rounded progress bar , css file. if value of occupied space increase depends on progress bar shown % of full or empty.

<div class="page">   <h1>pure css percentage circle - circle100</h1>   <!-- green -->   <div class="clearfix">     <div class="c100 p50 big green"> <span>50%</span>       <div class="slice">         <div class="bar"></div>         <div class="fill"></div>       </div>     </div>   </div> </div> 

check out guy's code - http://codepen.io/geedmo/pen/inffd

html :

<div class="wrap">  <div class="progress-radial progress-25">   <div class="overlay">25%</div> </div>  <div class="progress-radial progress-50">   <div class="overlay">50%</div> </div>  <div class="progress-radial progress-75">   <div class="overlay">75%</div> </div>  <div class="progress-radial progress-90">   <div class="overlay">90%</div> </div>  </div> 

css :

    @import compass  // colors $barcolor: tomato $overlaycolor: #fffde8 $backcolor: #2f3439  @import url(http://fonts.googleapis.com/css?family=noto+sans)  body   padding: 30px 0   background-color: $backcolor   font-family: 'noto sans', sans-serif  .wrap   width: 600px   margin: 0 auto  /* -------------------------------------  * bar container  * ------------------------------------- */ .progress-radial   float: left   margin-right: 30px   position: relative   width: 100px   height: 100px   border-radius: 50%   border: 2px solid $backcolor // remove gradient color   background-color: $barcolor // default 100%  /* -------------------------------------  * optional centered circle w/text  * ------------------------------------- */   .progress-radial .overlay   position: absolute   width: 60px   height: 60px   background-color: $overlaycolor   border-radius: 50%   margin-left: 20px   margin-top: 20px   text-align: center   line-height: 60px   font-size: 16px  /* -------------------------------------  * mixin progress-% class  * ------------------------------------- */  $step: 5 // step of % created classes  $loops: round(100 / $step) $increment: 360 / $loops $half: round($loops / 2) @for $i 0 through $loops   .progress-#{$i*$step}     @if $i < $half       $nextdeg: 90deg + ( $increment * $i )       background-image: linear-gradient(90deg, $backcolor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barcolor 50%, $backcolor 50%, $backcolor)     @else       $nextdeg: -90deg + ( $increment * ( $i - $half ) )       background-image: linear-gradient($nextdeg, $barcolor 50%, transparent 50%, transparent), linear-gradient(270deg, $barcolor 50%, $backcolor 50%, $backcolor)