آموزش جاوا اسکریپت: طراحی نوار پیشرفت زیبا و واکنش‌ گرا با ProgressBar.js

۳۶۱ بازدید
آخرین به‌روزرسانی: ۰۸ شهریور ۱۴۰۲
زمان مطالعه: ۶ دقیقه
آموزش جاوا اسکریپت: طراحی نوار پیشرفت زیبا و واکنش‌ گرا با ProgressBar.js

هیچ چیز در وب به یک‌باره رخ نمی‌دهد. تنها تفاوت در مدت زمانی است که وقوع یک رویداد طول می‌کشد. برخی پردازش‌ها در طی چند میلی‌ثانیه رخ می‌دهند و برخی دیگر چند ثانیه یا دقیقه به طول می‌انجامند. برای نمونه ممکن است بخواهید عکس بسیار بزرگی که از سوی کاربران آپلود شده است را ویرایش کنید و این پردازش مدت زمانی طول می‌کشد. در چنین مواردی بهتر است که اجازه بدهید بازدیدکنندگان بدانند که وب‌سایت در جایی متوقف شده است؛ اما در واقع در حال کار بر روی تصویر شما است و این کار نیز در حال پیشرفت است.

یکی از رایج‌ترین روش‌های نمایش میزان پیشرفت یک پردازش به بازدیدکنندگان، استفاده از یک نوار پیشرفت است. در این آموزش به شما می‌آموزیم که چگونه از کتابخانه ProgressBar.js برای ایجاد نوار پیشرفت‌های متفاوت یا اشکال ساده یا پیچیده بهره بگیرید.

ایجاد یک نوار پیشرفت ساده

زمانی که این کتابخانه را در پروژه خود گنجاندید، می‌توانید یک نوار پیشرفت را با استفاده از این کتابخانه به سادگی ایجاد کنید. ProgressBar.js در همه مرورگرهای عمده پشتیبانی می‌شود که شامل نسخه‌های بالاتر از 9 اینترنت اکسپلورر نیز هست. این بدان معنی است که می‌توانید از آن در هر وب‌سایتی بدون هیچ دغدغه‌ای بهره بگیرید. آخرین نسخه از این کتابخانه را می‌توانید از این آدرس گیت‌هاب به طور مستقیم دریافت کنید. همچنین با این لینک CDN می‌توانید آن را به پروژه خود اضافه کنید.

برای جلوگیری از هر گونه رفتار غیر منتظره، ابتدا اطمینان حاصل کنید که کانتینر نوار پیشرفت نسبت ابعادی برابر با خود نوار پیشرفت دارد. در حالتی که از دایره استفاده ‌کنید، نسبت ابعادی باید 1:1 باشد، زیرا عرض آن برابر با طول خواهد بود. در مورد اشکال نیم‌دایره نسبت ابعاد باید 2:1 باشد، چون عرض دو برابر طول است. به طور مشابه در مورد یک خط ساده کانتینر باید نسبت ابعاد 100:strokeWidth برای خط داشته باشد.

در زمان ایجاد نوارهای بیضوی با یک خط، دایره یا نیم‌دایره می‌توانید به سادگی از متد ()ProgressBar.Shape برای ایجاد نوار پیشرفت استفاده کنید. در این حالت shape می‌تواند به صوت circle، line و یا SemiCircle تعریف شود. می‌توانید دو پارامتر به متد ()shape ارسال کنید. پارامتر نخست یک سلکتور یا گره DOM برای شناسایی کانتینر نوار پیشرفت است. پارامتر دوم یک شیء با جفت کلید: مقدار است که نمایش نوار پیشرفت را تعیین می‌کند.

رنگ نوار پیشرفت با استفاده از مشخصه color تعیین می‌شود. هر نوار پیشرفتی که ایجاد می‌شود به صورت پیش‌فرض به رنگ خاکستری تیره خواهد بود. می‌توانید در خاطر داشته باشید که منظور از عرض در اینجا به پیکسل نیست بلکه برحسب درصد از اندازه canvas محاسبه می‌شود. برای نمونه اگر بوم شما 200 پیکسل عرض دارد، در این صورت مقدار 5 برای StrokeWidth به معنی خطی با ضخامت 10 پیکسل خواهد بود.

علاوه بر نوار پیشرفت اصلی، این کتابخانه امکان ترسیم یک خط انتهایی را نیز فراهم ساخته است تا بینندگان مسیری که نوار پیشرفت بر روی آن حرکت می‌کند را ببینند. رنگ خط زمینه با استفاده از مشخصه trailColor تعیین می‌شود و عرض آن را می‌توان با استفاده از مشخصه trailWidth تعیین نمود. همانند مشخصه StrokeWidth در این مورد نیز مقادیر بر اساس درصد محاسبه می‌شوند.

زمان کلی برای اتمام نوار پیشرفت از حالت اولیه تا حالت نهایی با استفاده از مشخصه duration تعیین می‌شود. به طور پیش‌فرض مدت زمان انیمیشن یک نوار پیشرفت به میزان 800 میلی‌ثانیه تنظیم شده است. با استفاده از مشخصه easing می‌توان تعیین کرد که نوار پیشرفت به چه ترتیبی باید در طی انیمیشن حرکت کند. همه نوارهای پیشرفت به طور پیش‌فرض با سرعتی خطی حرکت می‌کنند. برای این که انیمیشن جذاب‌تر باشد، می‌توانید این مقدار را به صورت های easeIn, easeOut, easeInOut, یا bounce تعیین نمایید.

پس از تعیین مقادیر پارامترهای اولیه می‌توانید نوارهای پیشرفت را با استفاده از متد ()animate به حرکت درآورید. این پارامتر خود سه پارامتر می‌گیرد. پارامتر نخست مقدار زمانی است که می‌خواهید خط پیشرفت انیمیشن داشته باشد. دو پارامتر دیگر اختیاری هستند. پارامتر دوم برای لغو هر گونه مقادیری که در راه‌اندازی اولیه تعیین شده است، مورد استفاده قرار می‌گیرد. سومین پارامتر یک تابع فراخوان برای اجرای کاری در انتهای انیمیشن است.

در مثال زیر سه نوار پیشرفت متفاوت با استفاده از مشخصاتی که قبلاً بررسی کردیم ایجاد شده است:

var lineBar = new ProgressBar.Line('#line-container', {
    color: 'orange',
    strokeWidth: 2,
    trailWidth: 0.5
});
 
lineBar.animate(1, {
    duration: 1000
});
 
var circleBar = new ProgressBar.Circle('#circle-container', {
    color: 'white',
    strokeWidth: 2,
    trailWidth: 10,
    trailColor: 'black',
    easing: 'easeInOut'
});
 
circleBar.animate(0.75, {
    duration: 1500
});
 
var semiBar = new ProgressBar.SemiCircle('#semi-container', {
    color: 'violet',
    strokeWidth: 2,
    trailWidth: 0.5,
    easing: 'bounce'
});
 
semiBar.animate(1, {
    duration: 3000
});

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

در مثال‌های فوق تنها چیزی که با پیشرفت نوار تغییر می‌یافت طول این نوار بود. با این حال ProgressBar.js امکان تغییر خصوصیات فیزیکی دیگر مانند عرض و رنگ خط پیشرونده را نیز فراهم ساخته است. در چنین مواردی می‌توانید مقادیر اولیه را برای نوار پیشرفت درون پارامتر from تعیین کنید و مقادیر نهایی را نیز در پارامتر to در زمان مقداردهی اولیه نوار پیشرفت مشخص سازید.

همچنین می‌توانید به این کتابخانه بگویید که یک عنصر متنی را به همراه نوار پیشرفت به حرکت درآورد و برخی اطلاعات متنی به کاربران نشان دهد. این متن می‌تواند هر چیزی از یک مقدار استاتیک تا مقدار عددی باشد که نماینده میزان پیشرفت انیمیشن است. پارامتر text یک شیء به عنوان مقدار می‌پذیرد.

این شیء می‌تواند یک پارامتر value داشته باشد و متن اولیه‌ای را که درون عنصر نمایش می‌یابد را نشان دهد. همچنین می‌توانید نام یک کلاس که باید به متن اضافه شود را با استفاده از پارامتر className بیان کنید. اگر می‌خواهید برخی سبک‌بندی‌های درون‌خطی به این متن اضافه کنید، می‌توانید همه آن‌ها را به صورت یک پارامتر style تعیین کنید. همه سبک‌های پیش‌فرض با تعیین style به مقدار null حذف می‌شوند. لازم است به خاطر بسپارید که مقادیر پیش‌فرض تنها در صورتی اعمال می‌شوند که مقدار سفارشی برای مشخصه CSS درون style تعیین نکرده باشید.

مقدار درون عنصر متنی در صورتی که تغییر نداده باشید، با همان طول کل انیمیشن خواهد بود. خوشبختانه ProgressBar.js یک پارامتر step نیز دارد که می‌توان برای تعریف یک تابع در هر گام از انیمیشن استفاده کرد. از آنجا که این تابع چندین بار در طی هر ثانیه فراخوانی خواهد شد، باید سعی کنید که محاسبات درون آن را تا حد امکان ساده نگهدارید.

var lineBar = new ProgressBar.Line("#line-container", {
  strokeWidth: 4,
  trailWidth: 0.5,
  from: { color: "#FF9900" },
  to: { color: "#00FF99" },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '-30px',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});
 
lineBar.animate(1, {
  duration: 4000
});
 
var circleBar = new ProgressBar.Circle("#circle-container", {
  color: "white",
  strokeWidth: 2,
  trailWidth: 25,
  trailColor: "black",
  easing: "easeInOut",
  from: { color: "#FF9900", width: 1 },
  to: { color: "#FF0099", width: 25 },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '45%',
      left: '42%',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});
 
circleBar.animate(0.75, {
  duration: 1500
});
 
var semiBar = new ProgressBar.SemiCircle("#semi-container", {
  color: "violet",
  strokeWidth: 2,
  trailWidth: 8,
  trailColor: "black",
  easing: "bounce",
  from: { color: "#FF0099", width: 1 },
  to: { color: "#FF9900", width: 2 },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '45%',
      left: '50%',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});
 
semiBar.animate(0.75, {
  duration: 2000
});

ایجاد نوار پیشرفت با شکل‌های خاص

در برخی موارد ممکن است بخواهیم نوارهای پیشرفتی بسازیم که شکل‌های متفاوتی داشته باشند و با طرح کلی وب‌سایت متناسب باشند. کتابخانه ProgressBar.js امکان ایجاد نوارهای پیشرفت با شکل‌های اختصاصی را با استفاده از متد ()Path فراهم ساخته است. این متد کارکردی شبیه ()Shape دارد؛ اما پارامترهای کمی برای سفارشی‌سازی انیمیشن نوار پیشرفت در خود جای داده است. شما همچنان می‌توانید duration و easing انیمیشن را تعریف کنید. اگر بخواهید رنگ و عرض خط مورد استفاده برای ترسیم مسیر سفارشی را تعیین کنید، می‌توانید آن‌ها را درون پارامترهای from و to قرار دهید.

این کتابخانه هیچ راهی برای ترسیم یک خط زمینه در مسیرهای سفارشی فراهم نساخته است. با این حال خودتان می‌توانید چنین خطی را به سادگی رسم کنید. ما در مثال زیر یک نوار پیشرفت مثلثی با استفاده از متد ()Path ایجاد کرده‌ایم.

پیش از نوشتن کد جاوا اسکریپت باید مسیر SVG سفارشی‌تان را در HTML تعریف کنید. کد مورد نیاز برای یک مثلث ساده در ادامه آمده است:

1<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="300" height="300" viewBox="0 0 300 300">
2  <path d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="#ddd" stroke-width="1"/>
3  <path id="triangle" d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="blue" stroke-width="5"/>
4</svg>

همچنین ممکن است متوجه شده باشید که دو عنصر مسیر (path) متفاوت ایجاد کرده‌ایم. مسیر نخست با رنگ خاکستری روشن مانند یک خط زمینه عمل می‌کند که در نوارهای پیشرفت ساده بخش قبل، مشاهده کردیم. مسیر دوم خطی است که با استفاده از کد خود آن را انیمیت می‌کنیم. ما به آن یک id داده‌ایم تا با استفاده از کد جاوا اسکریپت زیر قابل‌شناسایی باشد.

var path = new ProgressBar.Path("#triangle", {
  duration: 6000,
  from: {
    color: "#ff0000",
    width: 2
  },
  to: {
    color: "#0099ff",
    width: 10
  },
  strokeWidth: 4,
  easing: "easeInOut",
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
  }
});
 
path.animate(1);

سخن پایانی

همان‌طور که در این راهنما مشاهده کردید، کتابخانه ProgressBar.js امکان ساخت انواع متفاوتی از نوارهای پیشرفت را با سهولت فراهم کرده است. همچنین گزینه‌هایی برای متحرک‌سازی خصوصیات مختلف نوارهای پیشرفت مانند عرض و رنگ آن را در اختیار ما قرار می‌دهد.

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

اگر به این نوشته علاقه‌مند بوده‌اید، پیشنهاد می‌کنیم موارد زیر را نیز ملاحظه کنید:

==

بر اساس رای ۴ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
tutsplus
۱ دیدگاه برای «آموزش جاوا اسکریپت: طراحی نوار پیشرفت زیبا و واکنش‌ گرا با ProgressBar.js»

سلام خدمت شما
من میخواستم که همچین نوار پیشرفتی داخل سایت خودم استفاده کنم اما این نوار پیشرفت با اسکرول کردن پر بشه
میخواستم بدونم اون موقع باید چیکار کرد.
حیلی ممنون از شما

نظر شما چیست؟

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