Text Fill Progress Indicator

Progress will be shown by colored part of the text
GIF text fill animation

Select Text

Write a text which you want to show :

black loading...

Create Overlay Text

Write that text again, it will overlay our previous text :

And give color to it :

black and red loading...

Make the texts overlaps each other

overlayed text

Set the progress

You can set the progress by setting the width of overlayed text. Let’s say you want to show 40% progress :

40% progress

Or 80% :

80% progress

Or 0% (we will set this as initial state) :

0% progress

Control progress from JavaScript

Create some buttons which will change the progress by calling our JavaScript function :

GIF changing progress

Smooth Transiton when changing progress

GIF changing progress with transition

You can see whatever is the change in the progress, it takes 0.5 second. It looks slow when the change is small (for example 5%). It should take short time for small changes. You can set the transition duration according to how much change is happening. Like if there is 50% change in the progress, the transition time should be 50% of 0.5 second i.e. 0.25 second. You can do that as follows :

GIF changing progress with transition

Styling Text

Increase the font size :

GIF bigger font

Use stylish font. I’m using Google fonts :

GIF Lobster font

Center the text :

GIF text at center

Whole code :

Code is also available here : https://codepen.io/zFunx/pen/ZxERpg. Useful links :