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.