jQuery how to load part of image

Question

I have a little problem. I need to create circular slider, I didn't find any library which could help me, so seems like I need to write it on my own.
Here is my problem:

I want to create something like in picture above, but I can't find a way to load part of that gradiant for example:

Is it even possible to load part of image in js?

Answer 1

If you do not need to replace the image dynamically, I would recommend to prepare it in an image tool such as Photoshop.

if you have few images to replace, I would prepare them in Photoshop and change them via a javascript and css solution

Otherwise I do not know.

Answer 2

There is no way to load a part of an image in pure JavaScript. Instead you could use a sprite image and play with background position:

function getBgPos(pct) {
  if (pct < 12.5) { return '0 0'; }
  else if (pct < 25) { return '-100px 0'; }
  else if (pct < 37.5) { return '-200px 0'; }
  else if (pct < 50) { return '-300px 0'; }
  else if (pct < 62.5) { return '-400px 0'; }
  else if (pct < 75) { return '-500px 0'; }
  else if (pct < 87.5) { return '-600px 0'; }
  else if (pct < 100) { return '-700px 0'; }
  else { return '-800px 0'; }
};

i = 0;
setInterval(function () {
  jQuery('#loader').css('background-position', getBgPos(i));
  i += 12.5; if (i > 100) i = 0;
}, 500);

#loader {
  display: block;
  width: 100px;
  height: 100px;
  background: yellow url(https://i.sstatic.net/Xsf4k.png) no-repeat 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="loader" src="https://i.sstatic.net/ArcTX.png" />