Minimalist Text Loading Progress Indicator Plugin - txtProgress

Minimalist Text Loading Progress Indicator Plugin - txtProgress
File Size: 4.75 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.