Recently I needed a pure CSS progress bar. I’ll show you how I approached this problem.
It is very simple one

<span class="progress-bar">
<span>
</span>
</span>

Next thing to do is to define CSS for this to elements

.progress-bar {
display: block;
width: 100%;
height: 23px;
border: 1px solid #eee;
background-color: transparent;
padding: 1px;
}
 
.progress-bar span {
display: block;
height: 23px;
background-color: #ccc;
}

Afterwards you must dynamically load the width of inner span in percents.
And that’s all folks.

You can view demo here. View source to check how I have done it.