bootstrap

اسپینرهای Bootstrap

31 مه

اسپینرهای Bootstrap چیزی فراتر از دایره‌های متحرک ساده هستند؛ آن‌ها نشانه‌های بصری‌ای هستند که به‌طور ظریف به کاربر اطلاع می‌دهند که یک فرآیند در حال انجام است. این نشانه‌ها در هنگام بارگذاری، واکشی داده‌ها، یا اجرای عملیات پس‌زمینه بازخورد ضروری ارائه می‌دهند. به آن‌ها به چشم وعده‌ای ساکت از محتوایی که در راه است نگاه کنید؛ اسپینرها به کاربر اطمینان می‌دهند که برنامه در حال کار است و از ایجاد حس عدم پاسخگویی جلوگیری می‌کنند. از نشانگرهای بارگذاری کوچک داخل دکمه‌ها تا انیمیشن‌های برجسته‌ای که نشان‌دهنده پردازش کلی صفحه هستند، اسپینرها یکی از عناصر اساسی تجربه کاربری در برنامه‌های وب مدرن محسوب می‌شوند.

این راهنمای جامع به بررسی عمیق ساختار، گزینه‌های استایل‌دهی، قابلیت‌های سفارشی‌سازی، ملاحظات دسترسی‌پذیری، و استراتژی‌های خلاقانه استفاده از اسپینرها در Bootstrap می‌پردازد؛ استراتژی‌هایی که فراتر از انیمیشن‌های دایره‌ای ساده هستند.

ساختار پایه اسپینرها (.spinner-border، .spinner-grow)

Bootstrap دو نوع اصلی اسپینر ارائه می‌دهد که هرکدام ظاهر متفاوتی دارند:

  • اسپینر مرزی (.spinner-border): اسپینری سبک و دایره‌ای که با استفاده از حاشیه‌های CSS انیمیشن ایجاد می‌کند.
  • اسپینر رشد (.spinner-grow): اسپینری که با بزرگ و کوچک شدن متوالی، جلوه رشد و انقباض ایجاد می‌کند.

هر دو نوع معمولاً با استفاده از یک تگ <div> و کلاس‌های مربوطه همراه با ویژگی‌های دسترسی‌پذیری استفاده می‌شوند:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Spinners</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Spinners</h2>
        <div class="spinner-border" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow ms-3" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
  • role="status": بیانگر این است که عنصر نشان‌دهنده وضعیت یک فرآیند در حال انجام است.
  • <span class="visually-hidden">: متن جایگزین برای خواننده‌های صفحه است که هدف اسپینر را توضیح می‌دهد.

اسپینرهای متنی (استفاده از .text-*)

Bootstrap کلاس‌های رنگ متنی‌ای مانند .text-primary, .text-success, .text-warning, و… را ارائه می‌دهد که می‌توان روی اسپینرها اعمال کرد تا رنگ آن‌ها با برند یا مرحله فرآیند مطابقت داشته باشد:

<h2>Contextual Spinners</h2>
<div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success ms-3" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning ms-3" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger ms-3" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

اندازه اسپینر (.spinner-border-sm، .spinner-grow-sm)

برای کنترل اندازه اسپینرها می‌توان از کلاس‌های اصلاح‌کننده استفاده کرد:

<h2>Spinner Sizes</h2>
<div class="spinner-border spinner-border-sm" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm ms-3" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

این کلاس‌ها نسخه‌های کوچک‌تری از اسپینرها را ارائه می‌دهند که مناسب برای دکمه‌ها یا عناصر کوچک UI هستند.

اسپینر درون دکمه‌ها

می‌توان اسپینرها را درون دکمه‌ها قرار داد تا در هنگام کلیک کاربر بازخورد فوری ارائه شود. می‌توان متن دکمه را با اسپینر جایگزین کرد یا هر دو را کنار هم نمایش داد. همچنین باید دکمه را در هنگام پردازش غیرفعال کرد:

<h2>Spinners in Buttons</h2>
<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">Loading...</span>
</button>

<button class="btn btn-primary ms-2" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
    Loading...
</button>

<button class="btn btn-success mt-2" type="button" disabled>
    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
    Processing...
</button>

<button class="btn btn-info mt-2" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
    Fetching Data...
</button>
  • aria-hidden="true" برای زمانی است که متن دکمه مفهوم را منتقل می‌کند، پس اسپینر از دید خواننده صفحه پنهان می‌شود.

سفارشی‌سازی فراتر از استایل‌های پایه

می‌توانید با CSS سفارشی‌سازی بیشتری روی اسپینرها اعمال کنید:

<style>
    .custom-spinner-border {
        width: 3rem;
        height: 3rem;
        border-width: 0.5rem;
    }

    .custom-spinner-grow {
        width: 2rem;
        height: 2rem;
        animation-duration: 1.5s;
    }
</style>

<h2>Customized Spinners</h2>
<div class="spinner-border custom-spinner-border text-danger" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow custom-spinner-grow text-info ms-3" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

ملاحظات دسترسی‌پذیری (Accessibility)

  • از role="status" برای شناسایی وضعیت استفاده کنید.
  • همیشه از متن‌های جایگزین مانند <span class="visually-hidden"> استفاده کنید.
  • اگر لازم بود می‌توان از aria-live="polite" استفاده کرد تا تغییر وضعیت به خواننده صفحه اعلام شود.
  • هرگز فقط به اسپینر تکیه نکنید؛ متن یا نشانه‌های تکمیلی را هم ارائه دهید.
  • تمرکز صفحه را به‌درستی مدیریت کنید تا از حبس شدن روی اسپینر جلوگیری شود.

استراتژی‌های خلاقانه

از اسپینرها می‌توان در موارد خاص و خلاقانه‌ای استفاده کرد:

  • نمایش وضعیت بارگذاری داده: اسپینر کوچک کنار داده‌هایی مانند قیمت یا نام محصول.
  • بارگذاری تدریجی: استفاده از چند اسپینر برای بارگذاری بخش‌های مختلف یک صفحه.
  • انیمیشن‌های سفارشی: ایجاد اسپینرهای شخصی‌سازی‌شده با CSS یا SVG.
  • شاخص‌های وضعیت: استفاده از رنگ‌ها یا سبک‌های مختلف برای نشان دادن وضعیت‌هایی مانند انتظار، پردازش یا خطا.
  • بازخورد ظریف: برای عملیات سریع پس‌زمینه که نیاز به توجه زیاد ندارند.

مثال:

<p>Product Name: <span id="product-name">Loading <div class="spinner-border spinner-border-sm ms-1" role="status"><span class="visually-hidden">Loading...</span></div></span></p>
<p>Price: <span id="product-price">Loading <div class="spinner-grow spinner-grow-sm ms-1" role="status"><span class="visually-hidden">Loading...</span></div></span></p>

<script>
    // Simulate data loading
    setTimeout(() => {
        document.getElementById('product-name').textContent = "Awesome Gadget";
        document.getElementById('product-price').textContent = "$29.99";
    }, 1500);
</script>

بهترین شیوه‌ها

  • بازخورد به‌موقع بدهید: برای عملیات‌هایی که بیش از چند لحظه طول می‌کشند، اسپینر استفاده کنید.
  • سازگار باشید: از سبک یکسان اسپینرها در تمام برنامه استفاده کنید.
  • زیاده‌روی نکنید: برای عملیات‌های بسیار کوتاه اسپینر نشان ندهید.
  • موقعیت دقیق اسپینر: اسپینر باید در نزدیکی محتوای در حال بارگذاری باشد.
  • کارایی را بررسی کنید: مطمئن شوید اسپینر باعث کاهش سرعت نشود.
  • بر دسترسی تمرکز کنید: همیشه ویژگی‌های ARIA و متن‌های جایگزین را لحاظ کنید.

جمع‌بندی

اسپینرهای Bootstrap ابزاری حیاتی برای ساخت برنامه‌های وب واکنش‌گرا و کاربرپسند هستند. آن‌ها با ارائه بازخورد بصری در هنگام بارگذاری یا پردازش، انتظارات کاربر را مدیریت کرده و از ناامیدی جلوگیری می‌کنند. با درک ساختار، گزینه‌های استایل‌دهی، و الزامات دسترسی، می‌توانید اسپینرها را به‌درستی در رابط کاربری خود ادغام کرده و تجربه‌ای روان و شفاف برای همه کاربران فراهم کنید. اسپینرها نوید ساکت پیشرفت هستند که لحظات بلاتکلیفی را به فرصت‌های ارتباط مؤثر تبدیل می‌کنند.

جدیدتر Toast در بوت استرپ
بازگشت به لیست
قدیمی تر Scrollspy در Bootstrap

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *