CloseTag | الشروحات | Bootstrap | اشرطة التقدم في BootStrap | Bootstrap Progress Bars

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap demo</title>
<style>.progress{margin-bottom:1rem}</style>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    </head>
    <body>

      <div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

      


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

    </body>
  </html>

PCFkb2N0eXBlIGh0bWw+DQogIDxodG1sIGxhbmc9ImVuIj4NCiAgICA8aGVhZD4NCiAgICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4NCiAgICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSI+DQogICAgICA8dGl0bGU+Qm9vdHN0cmFwIGRlbW88L3RpdGxlPg0KPHN0eWxlPi5wcm9ncmVzc3ttYXJnaW4tYm90dG9tOjFyZW19PC9zdHlsZT4NCiAgICAgIDxsaW5rIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMi4wL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIiByZWw9InN0eWxlc2hlZXQiIGludGVncml0eT0ic2hhMzg0LWdIMnlJSnFLZE5IUEVxMG40TXFhL0hHS0loU2tJSGVMNUF5aGtZVjhpNTlVNUFSNmNzQnZBcEhITmwvdkkxQngiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPg0KICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IDo6LXdlYmtpdC1zY3JvbGxiYXJ7d2lkdGg6N3B4O2hlaWdodDo3cHg7fTo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2t7YmFja2dyb3VuZDojZmZmO306Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1ie2JvcmRlci1yYWRpdXM6NXB4O2JhY2tncm91bmQ6IzJmNDVmZjt9PC9zdHlsZT48L2hlYWQ+DQogICAgPGJvZHk+DQoNCiAgICAgIDxkaXYgY2xhc3M9InByb2dyZXNzIj4NCiAgPGRpdiBjbGFzcz0icHJvZ3Jlc3MtYmFyIiByb2xlPSJwcm9ncmVzc2JhciIgYXJpYS1sYWJlbD0iQmFzaWMgZXhhbXBsZSIgYXJpYS12YWx1ZW5vdz0iMCIgYXJpYS12YWx1ZW1pbj0iMCIgYXJpYS12YWx1ZW1heD0iMTAwIj48L2Rpdj4NCjwvZGl2Pg0KPGRpdiBjbGFzcz0icHJvZ3Jlc3MiPg0KICA8ZGl2IGNsYXNzPSJwcm9ncmVzcy1iYXIiIHJvbGU9InByb2dyZXNzYmFyIiBhcmlhLWxhYmVsPSJCYXNpYyBleGFtcGxlIiBzdHlsZT0id2lkdGg6IDI1JSIgYXJpYS12YWx1ZW5vdz0iMjUiIGFyaWEtdmFsdWVtaW49IjAiIGFyaWEtdmFsdWVtYXg9IjEwMCI+MjUlPC9kaXY+DQo8L2Rpdj4NCjxkaXYgY2xhc3M9InByb2dyZXNzIj4NCiAgPGRpdiBjbGFzcz0icHJvZ3Jlc3MtYmFyIiByb2xlPSJwcm9ncmVzc2JhciIgYXJpYS1sYWJlbD0iQmFzaWMgZXhhbXBsZSIgc3R5bGU9IndpZHRoOiA1MCUiIGFyaWEtdmFsdWVub3c9IjUwIiBhcmlhLXZhbHVlbWluPSIwIiBhcmlhLXZhbHVlbWF4PSIxMDAiPjwvZGl2Pg0KPC9kaXY+DQo8ZGl2IGNsYXNzPSJwcm9ncmVzcyI+DQogIDxkaXYgY2xhc3M9InByb2dyZXNzLWJhciIgcm9sZT0icHJvZ3Jlc3NiYXIiIGFyaWEtbGFiZWw9IkJhc2ljIGV4YW1wbGUiIHN0eWxlPSJ3aWR0aDogNzUlIiBhcmlhLXZhbHVlbm93PSI3NSIgYXJpYS12YWx1ZW1pbj0iMCIgYXJpYS12YWx1ZW1heD0iMTAwIj48L2Rpdj4NCjwvZGl2Pg0KPGRpdiBjbGFzcz0icHJvZ3Jlc3MiPg0KICA8ZGl2IGNsYXNzPSJwcm9ncmVzcy1iYXIiIHJvbGU9InByb2dyZXNzYmFyIiBhcmlhLWxhYmVsPSJCYXNpYyBleGFtcGxlIiBzdHlsZT0id2lkdGg6IDEwMCUiIGFyaWEtdmFsdWVub3c9IjEwMCIgYXJpYS12YWx1ZW1pbj0iMCIgYXJpYS12YWx1ZW1heD0iMTAwIj48L2Rpdj4NCjwvZGl2Pg0KDQogICAgICANCg0KDQogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMi4wL2Rpc3QvanMvYm9vdHN0cmFwLmJ1bmRsZS5taW4uanMiIGludGVncml0eT0ic2hhMzg0LUEzckpEODU2S293U2I3ZHdsWmRZRWtPMzlHYWdpN3ZJc0YwanJSQW9RbURLS3RRQkhVdUxaOUFzU3Y0akQ0WGEiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KICAgICAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9AcG9wcGVyanMvY29yZUAyLjExLjUvZGlzdC91bWQvcG9wcGVyLm1pbi5qcyIgaW50ZWdyaXR5PSJzaGEzODQtWGUrOGNMOW9KYTZ0Ti92ZUNoU1A3cSttblNQYWo1QmN1OW1QWDVGNXhJR0UwRFZpdHRhcVQ1bG9yZjBFSTdWayIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+DQogICAgICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjIuMC9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiIGludGVncml0eT0ic2hhMzg0LU9EbURJVnpOK3BGZGV4eEhFSEZCUUgzLzkvdlE5dW9yaTQ1ejRKam5Gc1J5ZGJtUWJtTDV0MXRRMGN1bFV6eUsiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KDQogICAgPC9ib2R5Pg0KICA8L2h0bWw+