أشرطة التقدم والدوارات

<!-- شريط تقدم أساسي --> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <!-- قيم مختلفة --> <div class="progress mb-3"> <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-3"> <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-3"> <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

<!-- تسمية داخل الشريط --> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <!-- تسمية بحد أدنى للعرض --> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 10%; min-width: 2em;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div> </div> <!-- تسمية خارجية --> <div class="d-flex justify-content-between mb-1"> <span>التقدم</span> <span>60%</span> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> </div>

<div class="progress mb-3"> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-3"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mb-3"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div> <!-- أشرطة متعددة مسماة --> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">HTML 35%</div> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">CSS 25%</div> <div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">JS 15%</div> </div>

<!-- شريط تقدم مخطط --> <div class="progress mb-3"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <!-- شريط تقدم مخطط متحرك --> <div class="progress mb-3"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <!-- شريط تقدم متحرك ملون --> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> </div>

<!-- شريط تقدم رفيع --> <div class="progress mb-3" style="height: 5px;"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <!-- الارتفاع الافتراضي (1rem / 16px) --> <div class="progress mb-3"> <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <!-- شريط تقدم سميك --> <div class="progress" style="height: 30px;"> <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> </div>

<!-- دوار حدود أساسي --> <div class="spinner-border" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> <!-- دوارات ملونة --> <div class="spinner-border text-primary" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> <div class="spinner-border text-success" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> <div class="spinner-border text-danger" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> <div class="spinner-border text-warning" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> <div class="spinner-border text-info" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div>

<!-- دوار متنامي أساسي --> <div class="spinner-grow" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> <!-- دوارات متنامية ملونة --> <div class="spinner-grow text-primary" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> <div class="spinner-grow text-success" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> <div class="spinner-grow text-danger" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div>

<!-- دوارات صغيرة --> <div class="spinner-border spinner-border-sm" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> <div class="spinner-grow spinner-grow-sm" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> <!-- حجم مخصص مع أنماط مضمنة --> <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div>

<!-- دوار مع نص --> <button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> جاري التحميل... </button> <!-- دوار فقط --> <button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">جاري التحميل...</span> </button> <!-- دوار متنامي في زر --> <button class="btn btn-success" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> جاري المعالجة... </button>

<!-- محاذاة المركز --> <div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> </div> <!-- محاذاة النص --> <div class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> </div> <!-- عائم لليمين --> <div class="clearfix"> <div class="spinner-border float-end" role="status"> <span class="visually-hidden">جاري التحميل...</span> </div> </div>