Text Fill Progress Indicator

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

Select Text

Write a text which you want to show :
<div class="text-progress">
	loading...
</div>

black loading...

Create Overlay Text

Write that text again, it will overlay our previous text :
<div class="text-progress">
	loading...
	<div class="overlay">
		loading...
	</div>
</div>
And give color to it :
.text-progress .overlay{
	color:red;
}

black and red loading...

Make the texts overlaps each other
.text-progress{
	position:fixed;/*so that left and top properties of its child element can be positioned relative to this element*/
}

.text-progress .overlay{
	color:red;
	position:absolute;
	top:0;
	left:0;
}

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 :
.text-progress .overlay{
/*..*/
	width:40%;
	overflow:hidden;
}

40% progress

Or 80% :
.text-progress .overlay{
/*..*/
	width:80%;
	overflow:hidden;
}

80% progress

Or 0% (we will set this as initial state) :
.text-progress .overlay{
/*..*/
	width:0;
	overflow:hidden;
}

0% progress

Control progress from JavaScript

var mainProgress=document.querySelector(".text-progress .overlay");//get the overlayed element
function changeProgress(to){
	mainProgress.style.width=to+"%";
}
Create some buttons which will change the progress by calling our JavaScript function :
<button onclick="changeProgress(0)">0%</button>
<button onclick="changeProgress(25)">25%</button>
<button onclick="changeProgress(50)">50%</button>
<button onclick="changeProgress(100)">100%</button>
<!-- .. -->
GIF changing progress

Smooth Transiton when changing progress

function changeProgress(to,time=0.5){ //defaut transition duration is 0.5 second
	mainProgress.style.transition= time + "s linear";
	mainProgress.style.width=to+"%";
}
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 :
function changeProgress(to,time=0.5){
	var currentWidth=parseInt(mainProgress.style.width);//get the current width of overlayed element
	
	if(!currentWidth)//in case width is null
		currentWidth=0;
	
	mainProgress.style.transition=Math.abs(time*(to-currentWidth)/100) + "s linear";
	mainProgress.style.width=to+"%";
}
GIF changing progress with transition

Styling Text

Increase the font size :
.text-progress{
	/*..*/
	font-size:5em;
	color:#ccc;
}
GIF bigger font
Use stylish font. I’m using Google fonts :
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
.text-progress{
	/*..*/
	font-family:'
GIF Lobster font
', cursive; }
GIF Lobster font
Center the text :
.text-progress{
	/*..*/
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
GIF text at center
Whole code :
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
  <style>
    .text-progress{
      position:fixed;
      font-size:5em;
      color:#ccc;
      font-family:'Lobster', cursive;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }

    .text-progress .overlay{
      color:red;
      position:absolute;
      top:0;
      left:0;
      width:0;
      overflow:hidden;
    }
</style>
</head>
<body>
  <button onclick="changeProgress(0)">0%</button>
  <button onclick="changeProgress(25)">25%</button>
  <button onclick="changeProgress(50)">50%</button>
  <button onclick="changeProgress(100)">100%</button>
  <div class="text-progress">
    loading...
    <div class="overlay">
      loading...
    </div>
  </div>
  <script>
    var mainProgress=document.querySelector(".text-progress .overlay");//get the overlayed element
    function changeProgress(to,time=0.5){ //defaut transition duration is 0.5 second
      var currentWidth=parseInt(mainProgress.style.width);//get the current width of overlayed element
    	if(!currentWidth)//in case width is null
    	  currentWidth=0;
    
    	mainProgress.style.transition=Math.abs(time*(to-currentWidth)/100) + "s linear";
    	mainProgress.style.width=to+"%";
    }
  </script>
</body>
</html>
Code is also available here : https://codepen.io/zFunx/pen/ZxERpg. Useful links :

Leave a Reply

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