Bootstrap 5 Spinners

-

تستخدم "Bootstrap "spinners لإظهار اشارة التحميل في المشروع. وهذه الاشارة تم إنشاؤها باستخدام HTML و CSS فقط ، الامر الي بيعني أنو لسنا بحاجة إلى اضافة اكود JavaScript لإنشائها. لكن اكيد بنحتاج إلى بعض اكود JavaScript لتغيير الشكل وعرض هذه Spinners عند الحاجه. يمكن من خلال Bootstrap 5 التعامل مع Spinners بسهولة وتغيير مظهرها وحجمها بسهولة من خلال utility classes.

وفي اناع كثيرة من classes للتعامل مع Spinners بنتعرف عليها فيما يلي: 

Border spinner

يسخدم هذا border spinners لاظهار اشارة التحميل وبتكون خفيفه lightweight 
نطبق المثال التالي: 
<!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">
        
        <div class="spinner-border" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</body>
</html>
النتيجة:
الامر بسيط جدا كل المطلوب نستخدم class باسم  spinner-border

استخدام Colored Spinners
ممكن استخدام مجموعه من الالوان مع Spinners باستخدام classes المتعلقة بلون الخط :
طبق الكود التالي في صفحة 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">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-secondary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-success" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-danger" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-warning" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-info" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-light" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-border text-dark" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</body>
</html>
النتيجة بتكون:
استخدمنا هون مجموعه من classes لتغير اللون مثل text-dark ، text-light، text-info ، text-warning بالاضافة الى spinner-border

استخدام Growing Spinners
يمكن اسخدام spinners بشكل مختلف على شكل قرص وبنستخدم class باسم spinner-grow. 
نطبق الكود التالي بصفحة 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">
        <div class="spinner-grow" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</body>
</html>
النتيجة بتكون :
في هذا الكود تم تطبيق اللون الافتراضي ، ويمكن التحكم بالالوان كمان.

استخدام  Growing Spinners Colors

<!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">
        <div class="spinner-grow text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-secondary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-success" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-danger" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-warning" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-info" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-light" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow text-dark" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</body>
</html>
طبقنا مجموعة من classes الخاصة بالألوان لتغيير اللون :
النتيجة:

تغيير الحجم Size
يمكن تغيير الحجم باستخدام classes التالية: .spinner-border-sm و .spinner-grow-sm 
طبق المثال التالي حتى نفهم الموضوع
<!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">
        <div class="spinner-border spinner-border-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow spinner-grow-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</body>
</html>
النتيجة:

ممكن تطبيق كود CSS خاص للتحكم بالحجم 
طبق المثال التالي: 
<!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">
        <div class="spinner-border m-5" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow m-5" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</body>
</html>
النتيجة:
اكيد لاحظة ان طبقنا كود CSS التالي :
style="width: 3rem; height: 3rem;"

وبهذه الطريقة يمكن التحكم بالحجم.

تطبيق Alignment 
تم تصميم Spinners في Bootstrap باستخدام rems و currentColor و display: inline-flex. هذا يعني أنه يمكن بسهولة تغيير حجمها تغيير لونها ومحاذاتها بسرعة. تعلمنا كيف بنغير الحجم واللون. الان بنتعلم كيف ممكن نغير مكانها.
نطبق المثال التالي في صفحة 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">
        <div class="spinner-border m-5" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</body>
</html>
النتيجة بتكون: 
استخدمنا class باسم m-5  الي بيعني ان طبقنا الكود التالي على Spinners :
.m-5 {
    margin: 3rem!important;
}

انقر يمين فوق الصورة في المتصفح واختر Inspect 

تغيير مكان  Placement Spinners
تطبيق Flex
ممكن نستخدم flexbox utilities, float utilities, or text alignment utilities لوضع الأزرار في المكان الذي تريده بالضبط في أي مكان.
نطبق الكود التالي في صفحة 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">
        <div class="d-flex justify-content-center">
            <div class="spinner-border m-5" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
</body>
</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">
        <div class="d-flex align-items-center m-5">
            <strong>Loading...</strong>
            <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
        </div>
    </div>
</body>
</html>
النتيجة بتكون:
تطبيق Text align
نطبق المثال التالي لعرض النص في منتصف الشاشة: 
<!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">
        <div class="text-center m-5">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة:
تطبيق Spinners مع Buttons
حكينا عن هذا الموضوع في درس buttons
طبق المثال التالي لفهم الموضوع: 
<!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">
        <button class="btn btn-success">
            <span class="spinner-border spinner-border-sm"></span>
        </button>
        <button class="btn btn-success">
            <span class="spinner-border spinner-border-sm"></span>
            Loading..
        </button>
        <button class="btn btn-success" disabled>
            <span class="spinner-border spinner-border-sm"></span>
            Loading..
        </button>
        <button class="btn btn-success" disabled>
            <span class="spinner-grow spinner-grow-sm"></span>
            Loading..
        </button>
    </div>
</body>
</html>

النتيجة:

في الكود السابق اضفنا <span> داخل button وطبقنا عليها class خاص ب spinner