Press "Enter" to skip to content

Create A Progress Bar On An Image | jQuery Progress.js

Progress Image is a lightweight and easy-to-use jQuery progress bar plugin that visualizes a percentage value by filling the background color of your favorite SVG image.

progress bar image generator, bs progress bar with image, progress bar background image, progress bar image gif, animated progress bar, css progress bar, progress bar template

How to make use of it:

1. Import the mandatory JavaScript progress.js after loading the newest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/progress.js"></script>

2. Embed an SVG picture into your doc and customise the progress bar utilizing the next HTML data attributes:

<!-- Using Font Awesome Icons -->
<i id="myId" data-class="myClass" data-percent="80" data-color="#ff5733" data-animation="500" class="fab fa-html5 progressIcon"></i>

<!-- Using Font Awesome Icons -->
<span data-percent="50" data-color="rgba(168, 255, 51, 0.5)" data-animation="1500" class="bi bi-align-start progressIcon"></span>

<!-- Using An Inline SVG Image -->
<svg data-percent="50" data-color="#ff5733" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill progressIcon" viewBox="0 0 16 16">
  <path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z" />
</svg>

<!-- Using Img Tag -->
<img data-percent="60" class="progressIcon" height="200px" src="1.svg" hspace="20"/>

Create Progress Bars Using SVG Images, Progress Image Plugin/Github, progress bar generator


See Demo And Download

Official Website(sepios87): Click Here

This superior jQuery/javascript plugin is developed by sepios87. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *