Minimalist Text Loading Progress Indicator Plugin - txtProgress

A super tiny jQuery text progress bar plugin that visualizes the loading progress by altering the filling color of characters of your text. Also supports any iconic font like Font Awesome, Bootstrap Glyphicon and much more.

See also:

• Image Loading Animation Plugin with jQuery and CSS3 - LoadGo

How to use it:

1. Include the txtProgress.css inside your head tag and txtProgress.js just before the closing body tag.

<link href="assets/css/txtProgress.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="assets/js/txtProgress.js"></script>

2. The Html structure for the text progress bar.

<div class="textProgress">
  <span class="tp txtprog">
    TextProgress
  </span>
  <span class="tp txtprog">
    <span class="underline">
      TextProgress
    </span>
    <span class="percent">0</span>
  </span>
</div>

3. Start & animate the text progress bar to a specified percentage value.

$(".txtprog").textProgress(50);

Change log:

2015-12-07

• Use CSS transition instead of jQuery animate

---

This awesome jQuery plugin is developed by jonatanolsson. For more Advanced Usages, please check the demo page or visit the official website.