Html5 Progress Polyfill
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>