Lea Verou‘nun  Html5 ve Css3 kullanarak hazırladığı kolay kullanımlı ilerleme çubuğu örneği.   Auto, manual yada animasyon gibi farklı  farklı özelliklerde kullanabiliyorsunuz.

Kullanım:

Head  etiketleri arasına eklenmesi gereken bölümler :

Javascript  ve Css  url adresleri :

<link href="style.css" rel="stylesheet" />
<link href="progress-polyfill.css" rel="stylesheet" />
<script>document.createElement('progress');</script>
<script src="progress-polyfill.js"></script>
<script src="tests.js"></script>
<script src="user-interaction.js"></script>

Body  etiketleri arasına eklenmesi gereken bölüm.

Html :

<li>
	<label>Indeterminate
		<progress max="100"></progress>
	</label>
</li>

<li>
	<label for="progress1">Progress: 0%</label>
	<progress max="10" value="0" id="progress1"></progress>
</li>

<li>
	<label for="progress2">Progress: .5 of 0</label>
	<progress max="0" value="0.5" id="progress2"></progress>
</li>

<li>
	<label for="progress3">Progress: 100%</label>
	<progress max="3254" value="3254" id="progress3"></progress>
</li>

<li>
	<label>Progress: 75%
		<progress max="0.8" value="0.6"></progress>
	</label>
</li>