آموزش Semantic progress

آموزش Semantic progress

عنصر جدید پیشروی به نظر می رسد شبیه به عنصر meter باشد و برای نشان دادن پیشروی یک عمل ایجاد شده است. پیشروی می تواند یا مشخص باشد یا نا مشخص. یعنی اینکه شما می توانید از عنصر پیشروی برای نشان دادن یک پیشروی استفاده کنید که حتی نمی دانید چقدر از کار مربوط به آن باقی مانده است.
گیج کننده به نظر می رسد، چطور می توانید بدون اینکه بدانید پایان کجاست، میزان پیشروی را بگویید.
اولین امکان، کار هنوز حتی شروع هم نشده، بنابراین یا 0 درصد است یا 0.0001 درصد که اصلا مطرح نیست.
دومین امکان اینکه، مقدار حقیقی پیشروی از طرف برخی سرورها یا فرایندهای آپدیت کردن آن در انتظار است.
در این بخش از آموزش طراحی سایت شما را با ساخت عنصر پیشروی آشنا می کنیم. یکی از استفاده های عنصر پیشروی، نشان دادن پیشروی فایل دانلود می باشد.

  <section>  ‎<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>  ‎   ‎   <script>  var progressBar = document.getElementById('p');  ‎       function updateProgress(newValue) {  progressBar.value = newValue;  progressBar.getElementsByTagName('span')[0].textContent = newValue;  ‎} </script>  </section> ‎  

برای مشخص کردن پیشروی، همیشه می توانید مقدار پیشروی را در قسمت value تنظیم کنید. یک ویژگی max وجود دارد که می توانید حداکثر مقدار پیشروی را نشان دهید. در مقایسه با عنصر meter، ویژگی min وجود ندارد، چرا که همیشه حداقل میزان پیشروی 0 می باشد.

              Progress of Task A : ‎<progress value="60" max="100">60%</progress>‎  

در نگارش نیز فقط اپرا 11 و گوگل کروم 8 عنصر پیشروی را در قالب یک نوار پیشروی پشتیبانی می کنند.

اگر از مرورگری که پیشروی را پشتیبانی کند، استفاده نمی کنید، تصویر زیر نشان می دهد که پیشروی در گوگل کروم 8 چگونه به نظر می رسد.