Custom image progress bar (~circle)

Question

I've stuck here. I want to make this like a progress bar but I don't have any idea how can I do this. (from A => B)

Thanks for help.

https://i.sstatic.net/n8fsz.jpg

Answer 1

I found a solution like this! I hope this helps!

  
  
  function pie(perc) {
    var rightPie = 180;
    var leftPie = 360;
    var rightDeg = null;
    var leftDeg = null;
    
    // 180 == 50 x perc ?
    var x = 180 * perc / 50;
    
    var newPerc = x;
    
    if (newPerc < 180) {
      rightDeg = rightPie + newPerc;
    }
    else if (newPerc <= 360 && newPerc >= 180) {
      rightDeg = 360;
      leftDeg = newPerc - 180;
    }
    
    if (rightDeg != null) {
        $('body').prepend('<style> .right-pie .char:before { -moz-transform: rotate('+rightDeg+'deg); -ms-transform: rotate('+rightDeg+'deg); -webkit-transform: rotate('+rightDeg+'deg); -o-transform: rotate('+rightDeg+'deg); transform: rotate('+rightDeg+'deg); } </style> ');
      }
    if (leftDeg != null) {
        $('body').prepend('<style> .left-pie .char:before { -moz-transform: rotate('+leftDeg+'deg); -ms-transform: rotate('+leftDeg+'deg); -webkit-transform: rotate('+leftDeg+'deg); -o-transform: rotate('+leftDeg+'deg); transform: rotate('+leftDeg+'deg); } </style> ');
      }
    //$('.log').prepend(newPerc+' - '+leftDeg + ' -- '+ rightDeg);
  } 
  

   // set pie 
   pie(26);

.gen-holder {
	width: 500px;
	height: 500px;
	position: relative;
}

.right-pie {
	width: 250px;
	height: 500px;
	background: url(http://crf.ngo/view/img/orphan-s-right.png) no-repeat left center;
	background-size: 200px 400px;
	position: absolute;
	right: 0px;
	top: 0px;
	content: " ";
	z-index: 15;
	overflow: hidden;
}
.right-pie .char {
  position: relative;
  width: 500px;
  height: 500px;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  left: 0px;
}
.right-pie .char:before {
  content: '';
  position: absolute;
  width: 250px;
  height: 500px;
  border-radius: 250px 0 0 250px;
  background: #fff;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -o-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center;
 
  left: -250px;
  z-index: 20;
}
.left-pie {
	width: 250px;
	height: 500px;
	background: url(http://crf.ngo/view/img/orphan-s-left.png) no-repeat right center;
	background-size: 200px 400px;
	position: absolute;
	left: 0px;
	top: 0px;
	content: " ";
	z-index: 45;
	overflow: hidden;
}
.left-pie .char {
  position: relative;
  width: 500px;
  height: 500px;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  left: 0px;
}
.left-pie .char:before {
  content: '';
  position: absolute;
  width: 250px;
  height: 500px;
  border-radius: 250px 0 0 250px;
  background: #fff;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -o-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  left: 0px;
  z-index: 20;

}

.image-holder {
	float: left;
	width: 350px;
	height: 350px;
	text-align: center;
	-webkit-mask-image: url(http://crf.ngo/view/img/orphan-mask-1.png);
	mask-image: url(http://crf.ngo/view/img/orphan-mask-1.png);
	background-size: cover;
	background-position: center center;
	margin-left: 75px;
	margin-top: 75px;
	position: relative;
	z-index: 50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-holder">
        <div class="image-holder" style="background-image: url(https://c1.staticflickr.com/9/8594/16537918922_cef77dead4_h.jpg)">
        </div>
        <div class="right-pie">
          <div class="char"></div>
        </div>
        <div class="left-pie">
          <div class="char"></div>
        </div>
		</div>

<div class="log"></div>