Home/ Questions/Q 8159163
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T17:49:27+00:00

I have an image called ‘progressbar.png’. Is there a way that I could crop

  • 0

I have an image called ‘progressbar.png’. Is there a way that I could crop this image, with PHP or Javascript, each time the page loads the image will crop depending on the progress percentage and be loaded into the page. For example, if the image was 200px wide, at 25% progress the image would be cropped to only 50px wide.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Make a div, set the background of the div to your image, and manipulate the div’s width to whatever you want.

    HTML:

    <div id="progressbar"></div>

    CSS:

    #progressbar{
background:url(progressbar.png) top left;
height:progressbarheightpx;
}

    Javascript:

    document.getElementById('progressbar').style.width='50px'

    Or it could be done in PHP by simply printing out the width directly to the div:

    <div id="progressbar" width="<?php echo $percent_done*200;?>px"></div>
    • 0