معرفی کتابخانه ProgressBar.js

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

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

ایجاد یک Progress Bar ساده

بعد از اینکه کتابخانه ProgressBar.js را به پروژه اضافه کردیم، ایجاد یک Progress Bar بسیار ساده خواهد بود. ProgressBar.js از تمام مرورگرهای محبوب و IE9+ پشتیبانی می‌کند، بنابراین مشکلی در این قسمت نخواهید داشت. می‌توانید آخرین نسخه از این کتابخانه را از طریق گیت‌هاب و یا به صورت مستقیم از طریق یک CDN دریافت کنید. 

برای دوری کردن از هرگونه رویداد ناگهانی، مطمئن شوید مکانی (کانتینر) که Progress Bar در آن قرار می‌گیرد از نسبت ابعاد بهره‌مند است. برای مثال در حالت دایره‌ای کانتینر باید نسبت ابعاد ۱:۱ داشته باشد، به این مفهوم که عرض و ارتفاع با همدیگر برابر هستند. در حالت نیم‌کره این نسبت به ۲:۱ می‌رسد، چرا که عرض شکل دو برابر ارتفاع آن است. 

وقتی که Progress Bar را با یک خط، دایره و یا نیم کره ایجاد می‌کنید، می‌توانید به سادگی از متد ProgressBar.Shape() برای ایجاد Progress Bar استفاده نمایید. در این حالت shape می‌تواند Circle, Line و یا SemiCircle باشد. می‌تواند دو پارامتر را نیز در متد Shape() قرار دهید. اولین پارامتر یک انتخاب‌گر یا نود مربوط به DOM است که کانتینر مربوط به Progress Bar را شناسایی می‌کند و دومین پارامتر یک شئ همراه با کلید-مقدار است که ظاهر مربوط به Progress Bar را تعیین می‌کند.

می‌توانید رنگ Progress bar را با استفاده از خاصیت color تعیین کنید. هر Progress Barی که ایجاد می‌کنید، به صورت پیشفرض از یک رنگ خاکستری تاریک بهره می‌برد. ضخامت مربوط به Progress Bar از طریق خاصیت strokeWidth تعیین می‌شود. باید این موضوع را در نظر بگیرید که اندازه‌گیری این مقدار به صورت درصد خواهد بود. برای مثال اگر شکل شما ۲۰۰ پیکسل عرض داشته باشد، مقدار strokeWidth برابر با ۵، یک خط به ضخامت ۱۰px را برای شما ایجاد می‌کند. 

در کنار خود Progress bar اصلی، این کتابخانه به شما اجازه می‌دهد تا بتوانید مسیر خطی Progress bar را نیز رسم کنید، مسیری که Progress bar روی آن حرکت کرده است. رنگ این خط را می‌توان از طریق خاصیت trailColor تعیین کنید، همچنین عرض آن نیز از طریق trailWidth قابل تنظیم است. درست مانند strokeWidth متد trailWidth نیز با درصد اندازه‌گیری می‌شود.

زمانی که یک Progress bar از ابتدا تا به انتهای آن می‌رود را می‌شود از طریق خاصیت duration تنظیم کنید. به صورت پیشفرض، یک Progress bar مقدار ۸۰۰ میلی‌ثانیه را برای تکمیل شدن انیمیشن لازم دارد.

می‌توانید از خاصیت easing برای تعیین شیوه حرکت Progress bar استفاده کنید. تمام Progress barها به صورت پیشفرض با سرعت liner حرکت می‌کنند. برای اینکه انیمیشن را بیشتر واضح نشان دهید می‌توانید مقادیر مربوط به easeIn, easeOut, easeInOut یا bounce را مقداردهی کنید.

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

در مثال زیر من سه Progress bar مختلف را با تمام خصوصیاتی که تا به حال گفتیم را ایجاد کردم. 

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
});

نتیجه:

متحرک‌سازی متن با استفاده از Progress Bar

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

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

این شئ می‌تواند یک پارامتر value داشته باشد که مقدار اولیه متن را تعیین می‌کند. می‌توانید یک کلاس را نیز برای شئ با استفاده از خاصیت className تعیین کنید. اگر می‌خواهید یکسری استایل را به صورت inline به المان متن اعمال کنید می‌توانید از خاصیت style بهره بگیرید. تمام استایل‌ها را می‌توانید با قرار دادن آن برابر null حذف کنید. 

مقدار موجود در المان متنی اگر بروزرسانی نشود، در روند انیمیشن به همان صورت باقی می‌ماند. 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
});

ایجاد Progress Bar با استفاده از شکل‌های سفارشی

برخی اوقات ممکن است قصد داشته باشید که Progress Barهایی را با استفاده از شکل‌های سفارشی ایجاد کنید. این کار ممکن است برای همخوانی با ظاهر کلی وبسایت‌تان انجام شود. ProgressBar.js به شما اجازه می‌دهد که با استفاده از متد Path() شکل‌های سفارشی را ایجاد کنید. این متد مانند Shape() کار می‌کند اما پارامترهای کمتری را برای سفارشی‌سازی ارائه می‌دهد. البته هنوز هم می‌توانید مقادیر مربوط به duration و easing را تنظیم کنید. اگر قصد داشته باشید که رنگ‌ و عرض stroke مربوط به pathهای سفارشی را متحرک کنید می‌توانید از پارامترهای from و to استفاده کنید. 

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

قبل از اینکه کدهای جاوااسکریپت را بنویسیم، نیاز است که SVG سفارشی را مطابق با زیر ایجاد کنید:

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

ممکن است متوجه باشید که من دو Path متفاوت را ایجاد کردم. اولین Path یک رنگ خاکستری روشن دارد و مانند یک دنباله کار می‌کند. دومین Path مربوط به موردی می‌شود که قصد داریم در کدهای‌مان آن را متحرک کنیم. 

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 به شما اجازه می‌دهد که به سادگی Progress Barهای مختلفی را ایجاد کنید. همچنین در این کتابخانه گزینه‌هایی برای متحرک کردن Progress Barها وجود دارد که می‌توانید از آن‌ها استفاده کنید.

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

منبع