نوار پیشرفت در Bootstrap

نوار پیشرفت در Bootstrap شاخص‌های بصری پویایی هستند که به‌طور مؤثر روند پیشرفت یک فرآیند، وضعیت تکمیل یک وظیفه یا مقدار فعلی در یک بازه تعریف‌شده را نمایش می‌دهند. می‌توان آن‌ها را به‌عنوان «نبض بصری عملیات» در نظر گرفت که بازخورد فوری به کاربر ارائه داده و در طی عملیات‌های زمان‌بر، انتظارات کاربر را مدیریت می‌کنند.

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

ساختار پایه نوار پیشرفت (.progress و .progress-bar)

ساختار پایه نوار پیشرفت در Bootstrap شامل دو عنصر HTML کلیدی است:

.progress: عنصر بیرونی که قاب نوار پیشرفت را تعیین می‌کند و پس‌زمینه آن را مشخص می‌سازد.
.progress-bar: عنصر داخلی که نمایانگر مقدار واقعی پیشرفت است. معمولاً یک <div> بوده و باید دارای ویژگی role="progressbar" برای دسترسی‌پذیری باشد، به همراه ویژگی‌های aria-valuenow، aria-valuemin، و aria-valuemax برای تعیین مقادیر فعلی، حداقل و حداکثر. همچنین باید از ویژگی style="width:..." استفاده شود تا میزان پیشرفت را نشان دهد.

مثال HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Progress Bar</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 Progress Bar</h2>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

        <h2 class="mt-3">Progress with Value</h2>
        <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>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ویژگی‌های کلیدی:

role="progressbar": نشان می‌دهد که این عنصر یک نوار پیشرفت است.
aria-valuenow: مقدار فعلی نوار.
aria-valuemin و aria-valuemax: محدوده مقادیر.
style="width:...": نشان‌دهنده عرض نوار به‌صورت درصدی از پیشرفت.
متن دلخواه: می‌توان داخل .progress-bar متن اضافه کرد برای نمایش درصد یا وضعیت.

نوارهای پیشرفت متنی بر اساس وضعیت (.bg-*)

Bootstrap کلاس‌های رنگ پس‌زمینه‌ای را برای نمایش وضعیت‌های مختلف ارائه می‌دهد:

.bg-primary
.bg-success
.bg-warning
.bg-danger
.bg-info
.bg-light
.bg-dark

مثال:

<h2>Contextual Progress Bars</h2>
<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress mt-2">
    <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress mt-2">
    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress mt-2">
    <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>

نوارهای پیشرفت راه‌راه (.progress-bar-striped)

برای نشان دادن فعالیت در حال انجام، می‌توان از کلاس .progress-bar-striped استفاده کرد.

<h2>Striped Progress Bars</h2>
<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-2">
    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-2">
    <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

نوارهای راه‌راه انیمیشنی (.progress-bar-animated)

برای تأکید بیشتر، می‌توانید از کلاس‌های .progress-bar-striped و .progress-bar-animated به‌صورت ترکیبی استفاده کنید.

<h2>Animated Striped Progress Bars</h2>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-2">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

نوارهای پیشرفت چندگانه (Stacked Progress Bars)

می‌توانید چند نوار پیشرفت را در یک ظرف قرار دهید تا چند مقدار مرتبط را نشان دهید.

<h2>Stacked Progress Bars</h2>
<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

سفارشی‌سازی ارتفاع نوار پیشرفت

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

<h2 class="mt-4">Custom Height</h2>
<div class="progress" style="height: 10px;">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-2" style="height: 25px;">
    <div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>

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

برای دسترسی‌پذیری بهتر:

role="progressbar" ضروری است.
استفاده از aria-valuenow، aria-valuemin، و aria-valuemax الزامی است.
در صورت وجود متن، باید معنی‌دار و مرتبط با وضعیت پیشرفت باشد.
فقط به رنگ اکتفا نکنید؛ از الگوهای راه‌راه، انیمیشن یا متن استفاده کنید.
هنگام تغییر مقدار پیشرفت، ویژگی‌های مرتبط باید به‌صورت پویا با جاوااسکریپت به‌روزرسانی شوند.

راهکارهای خلاقانه استفاده

نوار پیشرفت فقط برای بارگذاری نیست! می‌توان از آن در موارد زیر نیز استفاده کرد:

نمایش سطح مهارت: نمایش مهارت در یک پروفایل.
پیشرفت تکمیل فرم: نشان دادن مراحل تکمیل یک فرم چندمرحله‌ای.
پیشرفت دانلود: نمایش وضعیت دانلود فایل.
استفاده منابع: نمایش میزان استفاده از CPU، حافظه یا فضای دیسک.
نتایج رأی‌گیری: نمایش تصویری نتایج نظرسنجی.
پیشرفت داستان (Story) در شبکه‌های اجتماعی.
پیشرفت پخش صوتی یا تصویری.

مثال: نشانگر سطح مهارت

<h2>Skill Levels</h2>
<div class="mt-3">
    <label>HTML:</label>
    <div class="progress">
        <div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
    </div>
</div>
<div class="mt-2">
    <label>CSS:</label>
    <div class="progress">
        <div class="progress-bar bg-info" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
    </div>
</div>
<div class="mt-2">
    <label>JavaScript:</label>
    <div class="progress">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
    </div>
</div>

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

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

نتیجه‌گیری

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