آموزش کامل نوارهای پیشرفت یا progress bar در بوت استرپ با مثال

نوارهای پیشرفت

در این فصل ، درباره نوارهای پیشرفت (progress bar) بوت استرپ بحث خواهد شد. هدف از نوارهای پیشرفت ، نشان دادن این است که فرآیندهای مورد نظر در حال بارگیری  یا انجام شدن هستند و یا اینکه عملی وجود دارد که با توجه به عناصر موجود در صفحه صورت می پذیرد.

نکته : نوار پیشرفت از قابلیت انتقال (transition) و انیمیشن CSS3 استفاده می کند. این ویژگی ها در مرورگر اینترنت اکسپلورر 9 و نسخه های پایین تر یا قدیمی تر Firefox پشتیبانی نمی شوند. Opera 12 از قابلیت انیمیشن پشتیبانی نمی کند.

نوار پیشرفت پیش فرض

برای ساخت یک نوار پیشرفت پایه به صورت زیر عمل می کنیم :

• یک تگ <div> با کلاس .progress اضافه می کنیم.
• در ادامه ، در داخل تگ <div> فوق ، یک تگ <div> خالی با یک کلاس .progress-bar اضافه می کنیم.
• یک صفت style را با عرض (width) مشخص شده به عنوان یک درصد پیشرفت اضافه می کنیم. به طور مثال ، style = “60%” نشان می دهد که نوار پیشرفت 60٪ پیشرفت نموده است.

به مثال زیر توجه نمایید :

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

خروجی قطعه کد فوق به صورت زیر می باشد :

نوار پیشرفت جایگزین

برای ساخت یک نوار پیشرفت با سبک های متفاوت به صورت زیر عمل می کنیم :

• یک تگ <div> با یک کلاس .progress اضافه می کنیم.
• سپس ، در داخل تگ <div> فوق ، یک تگ <div> خالی با یک کلاس .progress-bar و کلاس progress-bar-* اضافه می کنیم که نماد * می تواند یکی از مقادیر success ، info ، warning و danger باشد.
• یک صفت style را با عرض مشخص شده به عنوان مقدار درصد پیشرفت اضافه می کنیم. به طور مثال ، style = “60%” ، نشان می دهد که نوار پیشرفت در 60٪ است.

به مثال زیر توجه نمایید :

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

خروجی قطعه کد فوق به صورت زیر می باشد :

نوار پیشرفت راه راه

برای ایجاد نوار پیشرفت راه راه (striped progress bar) به صورت زیر عمل می کنیم :

• یک تگ <div> با یک کلاس .progress و .progress-striped اضافه می کنیم.
• سپس ، در داخل تگ <div> فوق ، یک تگ <div> خالی با یک کلاس .progress-bar و کلاس progress-bar-* اضافه می کنیم که نماد * می تواند یکی از مقادیر success ، info ، warning و danger باشد.
• یک صفت style را با عرض مشخص شده به عنوان مقدار درصد پیشرفت اضافه می کنیم. به طور مثال ، style = “60%” ، نشان می دهد که نوار پیشرفت در 60٪ است.

به مثال زیر توجه نمایید :

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

خروجی قطعه کد فوق به صورت زیر می باشد :

نوار پیشرفت متحرک

برای ایجاد یک نوار پیشرفت متحرک به صورت زیر عمل می کنیم :

• یک تگ <div> با یک کلاس .progress و .progress-striped اضافه می کنیم. هم چنین ، کلاس .active را به کلاس .progress-striped اضافه می کنیم.
• سپس ، در داخل تگ <div> فوق ، یک تگ <div> خالی با یک کلاس .progress-bar اضافه می کنیم.
• یک صفت style را با عرض مشخص شده به عنوان مقدار درصد پیشرفت اضافه می کنیم. به طور مثال ، style = “60%” ، نشان می دهد که نوار پیشرفت در 60٪ است.

این کار موجب متحرک شدن نوار پیشرفت راه راه از سمت راست به چپ خواهد شد.

به مثال زیر توجه نمایید :

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

خروجی قطعه کد فوق به صورت یک نوار پیشرفت در حال حرکت از سمت راست به چپ خواهد شد.

نوار پیشرفت پشته ای

می توانیم چندین نوار پیشرفت را به صورت پشته قرار دهیم. نوارهای پیشرفت چندتایی را در همان کلاس .progress قرار می دهیم تا آنها را به صورت پشته ، همان طور که در مثال زیر مشاهده می شود ، اضافه کنیم.

<div class = "progress">
   
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
   
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>

خروجی قطعه کد فوق به صورت زیر می باشد :