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.stack.imgur.com/n8fsz.jpg

I didn't try anything. Just I don't now how to do it. What logic should i use? — erenbertr, Sep 13 '15 at 15:58
Start by posting what you're doing now, without the progress bar. — ElmerCat, Sep 15 '15 at 17:27

score 0 · Accepted Answer · answered Sep 14 '15 at 14:09

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>

Custom image progress bar (~circle)

1 Answers1