Modded Css Round Progress Bar

SOURCE: http://codepen.io/seanstopnik/pen/Abyhj

by Annie Lagang

HTML

<div class="card">
  <div class="donut-chart time-remaining">
    <!-- clip is used for reversing the colors for angles more than 180 -->
    <div class="clip one">
        <div class="slice one"></div>
    </div>
    <div class="clip two">
        <div class="slice two"></div>
    </div>
    <div class="chart-center">
      <span data-content="3:20:00"></span>
    </div>
  </div>
  <h1>time remaining</h1>
</div>

<div class="container">
        Percentage: <input type="text" id="timeremaining-percentage" value="37" />
        New Text: <input type="text" id="timeremaining-newtext" value="3:45:12" />
        <input type="button" id="timeremaining" value="Time Remaining Send" />
    </div>

<!--
<div class="card">
  <div class="donut-chart decision-round">
    <div class="slice one"></div>
    <div class="slice two"></div>
    <div class="chart-center">
      <span data-content="2/3"></span>
    </div>
  </div>
  <h1>decision round</h1>
  <span style="display:none;"></span>
</div>

<div class="card">
  <div class="donut-chart start-year">
    <div class="slice one"></div>
    <div class="slice two"></div>
    <div class="chart-center">
      <span data-content="FY04"></span>
    </div>
  </div>
  <h1>start of year</h1>
  <span style="display:none;"></span>
</div>
-->

CSS

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: #e1e1e1;
}

.card {
  float: left;
  background: #fff;
  padding: 20px;
  margin: 0 20px 0 0;
}

/* START: Donut Core */
.donut-chart {
  position: relative;
  border-radius: 50%;
  //overflow: hidden;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.donut-chart .slice {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.donut-chart .chart-center {
  position: absolute;
  border-radius: 50%;
}

.donut-chart .chart-center span {
  display: block;
  text-align: center;
}

.donut-chart {
  width: 120px;
  height: 120px;
  background: #FFFFFF;
  //margin: 0 auto;
}

.donut-chart.time-remaining {
	background: #7AAB38;	
}

.donut-chart.time-remaining.expired {
	background: #F1A065;	
}

.clip.one {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    clip: rect(0px, 120px, 120px, 60px);
}

.slice.one {
    position: absolute;
    width: 120px;
    height: 120px;
    clip: rect(0px, 60px, 120px, 0px);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #D9D9D9;
    border-color: #D9D9D9;
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
}

.clip.two {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    clip: rect(0, 60px, 120px, 0px);
}

.slice.two {
    position: absolute;
    width: 120px;
    height: 120px;
    clip: rect(0px, 120px, 120px, 60px);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #D9D9D9;
    border-color: #D9D9D9;
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
}

.donut-chart.time-remaining .clip.one .slice.one {
	background: #72ACAE;
}

.donut-chart.time-remaining .clip.two...

JavaScript

$(function(){
	$('#timeremaining').click(function () {
			var timeRemainingDonut = $('.donut-chart.time-remaining');
   	  updateRadialProgressBar(timeRemainingDonut, $('#timeremaining-percentage').val());
      timeRemainingDonut.find('span').attr('data-content', $('#timeremaining-newtext').val());
   });
});

function updateRadialProgressBar(element, percentage){
		var rightSemiCircle = 180;
    var leftSemiCircle = 0;

    var computedAngle = (percentage / 100) * 360;

    if (computedAngle <= 180) {
        rightSemiCircle = computedAngle;
    } else {
        leftSemiCircle = computedAngle - 180;
    }

    rotate(element.find('.slice.one'), rightSemiCircle);
    rotate(element.find('.slice.two'), leftSemiCircle);
}

function rotate(element, degree) {
    element.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        'transform': 'rotate(' + degree + 'deg)'
    });
}