شريط التقدم Bootstrap 5 Progress Bars

-

بنتعلم في هذا الدرس شو هي اشرطة التقدم Progress Bars، وبنستخدم لعرض تقدم الانجاز في المهام في المواقع والتطبيقات، ويمكن من خلا Bootstrap تطبيق مجموعه من الخصائص على هذه الاشرطة بنتعرف عليها

نبدا بتطبيق مثال حتى نفهم الموضوع: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <h2>Basic Progress Bar</h2>
        <p>Apply .progress class to a container element and add the progress-bar class to its child element.</p>
        <div class="progress">
            <div class="progress-bar" style="width:70%"></div>
        </div>
    </div>
</body>
</html>
النتيجة: 
تمام نفهم شو عملنا.
ملاحظة: طبقنا في هذ المثال Progress Bars باستخدام CSS Classes وما طبقنا HTML element الخاص ب Progress Bars
للتذكير بكود HTML elementj بنستخدم 
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>
والنتيحة 

تمام نرجع للكود تبعنا . 
طبقنا class باسم progress على <div> الاولى واضفنا فيها <div> ثانية وطبقنا عليها class باسم progress-bar وحددنا نسبة التقدم في الشريط تساوي 70% الكود:
 <div class="progress">
    <div class="progress-bar" style="width:70%"></div>
 </div>
لاحظ ان عملنا عرض هذا الشريط باستخدام الكود style="width:70%"
يوفر Bootstrap عددًا من classes المعرفة مسباقا والي بتعمل على ضبط العرض. وهاي classes طبقناها في المثال التالي:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
        <div class="w-50 p-3" style="background-color: #ffd800;">Width 50%</div>
        <div class="w-75 p-3" style="background-color: #b6ff00;">Width 75%</div>
        <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
        <div class="w-auto p-3" style="background-color: #000000;">Width auto</div>
    </div>
</body>
</html>
النتيجة بتكون:

اكيد لاحظت ان كل class الو عرض محدد وهي 25%، 50%، 75%، 100%، ,والاخير بتم تحديد العرض بشكل تلقائي
تمام نشوف الان كيف ممكن نطبق هذه classes على Progress Bars بتطبيق الكود التالي في صفحة HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <div class="progress">
            <div class="progress-bar w-25" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <br />
        <div class="progress">
            <div class="progress-bar w-50" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <br />
        <div class="progress">
            <div class="progress-bar w-75" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <br />
        <div class="progress">
            <div class="progress-bar w-100" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
</body>
</html>

النتيجة :

تمام عرفنا كيف بنتحكم بالعرض طيب شو مشان الارتفاع .

تغيير الارتفاع Height

نعدل على الكود السابق الى :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container" style="height: 25px;">
        <div class="progress h-25">
            <div class="progress-bar w-25" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <br />
        <div class="progress" style="height: 25px;">
            <div class="progress-bar w-50 " role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <br />
        <div class="progress" style="height: 75px;">
            <div class="progress-bar w-75" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <br />
        <div class="progress" style="height: 100px;">
            <div class="progress-bar w-100" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
</body>
</html>

النتيجة:

اضافة Labels الى الشريط 

لاضافة رسالة نصية داخل الشريط  progress bars فقط المطلوب اضافة نص داخله.

نعدل على المثال السابق ونشوف النتيجة:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container" style="height: 25px;">
        <div class="progress h-25">
            <div class="progress-bar w-25" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>
        <br />
        <div class="progress" style="height: 25px;">
            <div class="progress-bar w-50 " role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">50%</div>
        </div>
        <br />
        <div class="progress" style="height: 75px;">
            <div class="progress-bar w-75" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">75%</div>
        </div>
        <br />
        <div class="progress" style="height: 100px;">
            <div class="progress-bar w-100" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">100%</div>
        </div>
        
    </div>
</body>
</html>
النتيجة:
اكيد لاحظت ان اضفنا نسبة مئوية برقم داخل كل progress bars

تغيير لون الخلفية Backgrounds
لتعديل لون خلفية الشريط المطلوب اضافة class الخاص بلون الخلفيه الى حكينا عنها سابقا 
نتذكر شو هي classes الخاصه بتغيير لون الخلفيه:
bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark 
نطبق المثال التالي حتى نفهم الموضوع:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container" style="height: 25px;">
        <br />  
        <div class="progress h-25">
            <div class="progress-bar w-25 bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>
        <br />
        <div class="progress" style="height: 25px;">
            <div class="progress-bar w-50 bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">50%</div>
        </div>
        <br />
        <div class="progress" style="height: 75px;">
            <div class="progress-bar w-75 bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">75%</div>
        </div>
        <br />
        <div class="progress" style="height: 100px;">
            <div class="progress-bar w-100 bg-secondary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">100%</div>
        </div>
    </div>
</body>
</html>

النتيجة بتكون :

تطبيق خلفية مخططة Striped 

يمكن ايضا تطبيق خلفية مخططه على الشريط باستخدام class التالي progress-bar-striped:

نعدل على الكود السابق الى :

 <!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container" style="height: 25px;">
        <br />  
        <div class="progress h-25">
            <div class="progress-bar w-25 bg-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>
        <br />
        <div class="progress" style="height: 25px;">
            <div class="progress-bar w-50 bg-danger progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">50%</div>
        </div>
        <br />
        <div class="progress" style="height: 75px;">
            <div class="progress-bar w-75 bg-info progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">75%</div>
        </div>
        <br />
        <div class="progress" style="height: 100px;">
            <div class="progress-bar w-100 bg-secondary progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">100%</div>
        </div>
    </div>
</body>
</html>
النتيجة:
تطبيق Multiple Progress Bars
يمكن تطبيق شريط متعدد الالوان ومن الامثلة على ذلك فحص مدى قوة كلمة المرور بحيث يتم عرض تدرج قوة كلمة المرور على مراحل. 
نطبق المثال التالي :
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container" style="height: 25px;">
        <div class="progress">
            <div class="progress-bar bg-danger" style="width:33.33%">
                Weak password
            </div>
            <div class="progress-bar bg-warning" style="width: 33.33%">
                Medium Password
            </div>
            <div class="progress-bar bg-success" style="width: 33.33%">
                Strong Password
            </div>
        </div>
    </div>
</body>
</html>

النتيجة:


اضافة شريط متحرك Animated Progress Bar

يمكن عرض الشريط بشكل متحرك باضافة class باسم progress-bar-animated. 

نطبق الكود التالي:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container" style="height: 25px;">
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
        </div>
    </div>
</body>
</html>

النتيجة: