پیشرفت (Progress) - Axelit

نوار پیشرفت

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


                <div className="progress w-100" role="progressbar" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-primary" style="width: 12.5%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-secondary" style="width: 25%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-success" style="width: 37.5%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-danger" style="width: 50%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-warning" style="width: 62.5%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-info" style="width: 75%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-light" style="width: 82.5%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-dark" style="width: 95%"></div>
                </div>

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

12.5%

25%

37.5%

50%

62.5%

75%

82.5%

95%


<div className="progress w-100" role="progressbar" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-primary" style="width: 12.5%"> 12.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-secondary" style="width: 25%"> 25% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-success" style="width: 37.5%"> 37.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-danger" style="width: 50%"> 50% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-warning" style="width: 62.5%"> 62.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-info" style="width: 75%"> 75% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-light" style="width: 82.5%"> 82.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-dark" style="width: 95%"> 95% </div>
</div>

نوار پیشرفت راه‌راه با انیمیشن

12.5%

25%

37.5%

50%

62.5%

75%

82.5%

95%


<div className="progress w-100" role="progressbar" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-primary progress-bar-striped progress-bar-animated" style="width: 12.5%"> 12.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-secondary progress-bar-striped progress-bar-animated" style="width: 25%"> 25% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 37.5%"> 37.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 50%"> 50% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 62.5%"> 62.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width: 75%"> 75% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light progress-bar-striped progress-bar-animated" style="width: 82.5%"> 82.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-dark progress-bar-striped progress-bar-animated" style="width: 95%"> 95% </div>
</div>

اندازه‌های مختلف نوار پیشرفت

12.5%

25%

37.5%

50%

62.5%

75%

82.5%

95%


  <div className="progress h-5">
    <div className="progress-bar bg-primary h-5" role="progressbar" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%"> 12.5% </div>
  </div>

  <div className="progress h-6">
    <div className="progress-bar bg-secondary h-6" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"> 25% </div>
  </div>

  <div className="progress h-7">
    <div className="progress-bar bg-success h-7" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100" style="width: 37.5%"> 37.5% </div>
  </div>

  <div className="progress h-8">
    <div className="progress-bar bg-danger h-8" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> 50% </div>
  </div>

  <div className="progress h-9">
    <div className="progress-bar bg-warning h-9" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100" style="width: 62.5%"> 62.5% </div>
  </div>

  <div className="progress h-10">
    <div className="progress-bar bg-info h-10" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"> 75% </div>
  </div>

  <div className="progress h-11">
    <div className="progress-bar bg-light h-11" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100" style="width: 82.5%"> 82.5% </div>
  </div>

  <div className="progress h-12">
    <div className="progress-bar bg-dark h-12" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%"> 95% </div>
  </div>

نمونه واقعی در حال اجرا

در حال بارگذاری داده‌ها...

75% در حال پردازش

52% در حال بروزرسانی...

1 دقیقه

در حال حذف داده‌ها (85% باقی مانده)

1 دقیقه باقی مانده


<div className="d-flex gap-3 flex-wrap">
          <div className="progress-box bg-light-primary w-100">
            <div className="progress-content">
              <div>
                <div className="left d-flex align-items-center">
                  <span className="spinner-border spinner-border-sm me-2 ms-2" role="status" aria-hidden="true"></span>
                  
                  
                  در حال بارگذاری داده‌ها...
                </div>
                <div className="right">
                  
                </div>
              </div>
            </div>
            <div className="progress w-100 h-5" role="progressbar" aria-valuenow="100" aria-valuemax="100">
              <div className="progress-bar bg-primary h-5" style="width: 100%">100%</div>
            </div>
          </div>
        </div>

<div className="d-flex gap-3 flex-wrap">
          <div className="progress-box bg-light-secondary w-100">
            <div className="progress-content">
              <div>
                <div className="left d-flex align-items-center">
                  
                  
                  
                  75% در حال پردازش
                </div>
                <div className="right">
                  
                </div>
              </div>
            </div>
            <div className="progress w-100 h-5" role="progressbar" aria-valuenow="75" aria-valuemax="100">
              <div className="progress-bar bg-secondary h-5" style="width: 75%">75%</div>
            </div>
          </div>
        </div>

<div className="d-flex gap-3 flex-wrap">
          <div className="progress-box bg-light-success w-100">
            <div className="progress-content">
              <div>
                <div className="left d-flex align-items-center">
                  
                  
                  
                  52% در حال بروزرسانی...
                </div>
                <div className="right">
                  <span class="badge text-bg-success">1 دقیقه</span>
                </div>
              </div>
            </div>
            <div className="progress w-100 h-5" role="progressbar" aria-valuenow="52" aria-valuemax="100">
              <div className="progress-bar bg-success h-5" style="width: 52%">52%</div>
            </div>
          </div>
        </div>

<div className="d-flex gap-3 flex-wrap">
          <div className="progress-box bg-light-danger w-100">
            <div className="progress-content">
              <div>
                <div className="left d-flex align-items-center">
                  
                  
                  <IconTrash size={20} className="me-1 ms-1" />
                  در حال حذف داده‌ها (85% باقی مانده)
                </div>
                <div className="right">
                  <span class="badge text-bg-danger">1 دقیقه باقی مانده</span>
                </div>
              </div>
            </div>
            <div className="progress w-100 h-5" role="progressbar" aria-valuenow="15" aria-valuemax="100">
              <div className="progress-bar bg-danger h-5" style="width: 15%">15%</div>
            </div>
          </div>
        </div>

<div className="d-flex gap-3 flex-wrap"> <div className="progress-box bg-light-primary w-100"> <div className="progress-content"> <div> <div className="left d-flex align-items-center"> <span className="spinner-border spinner-border-sm me-2 ms-2" role="status" aria-hidden="true"></span> در حال بارگذاری داده‌ها... </div> <div className="right"> </div> </div> </div> <div className="progress w-100 h-5" role="progressbar" aria-valuenow="100" aria-valuemax="100"> <div className="progress-bar bg-primary h-5" style="width: 100%">100%</div> </div> </div> </div> <div className="d-flex gap-3 flex-wrap"> <div className="progress-box bg-light-secondary w-100"> <div className="progress-content"> <div> <div className="left d-flex align-items-center"> 75% در حال پردازش </div> <div className="right"> </div> </div> </div> <div className="progress w-100 h-5" role="progressbar" aria-valuenow="75" aria-valuemax="100"> <div className="progress-bar bg-secondary h-5" style="width: 75%">75%</div> </div> </div> </div> <div className="d-flex gap-3 flex-wrap"> <div className="progress-box bg-light-success w-100"> <div className="progress-content"> <div> <div className="left d-flex align-items-center"> 52% در حال بروزرسانی... </div> <div className="right"> <span class="badge text-bg-success">1 دقیقه</span> </div> </div> </div> <div className="progress w-100 h-5" role="progressbar" aria-valuenow="52" aria-valuemax="100"> <div className="progress-bar bg-success h-5" style="width: 52%">52%</div> </div> </div> </div> <div className="d-flex gap-3 flex-wrap"> <div className="progress-box bg-light-danger w-100"> <div className="progress-content"> <div> <div className="left d-flex align-items-center"> <IconTrash size={20} className="me-1 ms-1" /> در حال حذف داده‌ها (85% باقی مانده) </div> <div className="right"> <span class="badge text-bg-danger">1 دقیقه باقی مانده</span> </div> </div> </div> <div className="progress w-100 h-5" role="progressbar" aria-valuenow="15" aria-valuemax="100"> <div className="progress-bar bg-danger h-5" style="width: 15%">15%</div> </div> </div> </div>