آموزش ساخت نوار پیشرفت انیمیشنی با استفاده از جاوااسکریپت

سه شنبه ۲ شهریور ۱۳۹۵

آموزش ساخت نوار پیشرفت انیمیشنی با استفاده از جاوااسکریپتReviewed by جواد نبوی on Aug 23Rating: 4.5

ساخت نوار پیشرفت انیمیشنی (Progress Bar)

در بعضی از قسمت های سایت ممکن است نیاز به نمایش دادن درصد پیشرفت چیزی داشته باشید. این کار باعث میشود کاربر از میزان پیشرفت عملیات آگاه شود. در بعضی از جاها نیاز است که یک نوار پیشرفت قرار دهید که به صورت انیمیشنی پر شود. ما در این آموزش میخواهیم نحوه ساخت یک نوار پیشرفت انیمیشنی را با جاوااسکریپت به شما آموزش دهیم. این نوار پیشرفت از یک درصد تا صد درصد پر میشود. همچنین دارای درصد عددی نیز میباشد که همراه با نوار، به ۱۰۰% میرسد. این نوار پیشرفت را با استفاده از Html، CSS و جاوااسکریپت می سازیم.

نوار پیشرفت انیمیشنی با جاوااسکریپت

بد نیست ابتدا یک پیش نمایش از نتیجه نهایی ببینید.

قدم اول: اضافه کردن کد HTML

در نخستین گام باید کد html زیر را به جایی که میخواهید نوار پیشرفت نمایش داده شود اضافه کنید:

<div id="myProgress">
 <div id="myBar"></div>
 </div>
 <br>
 <button onclick="move()">Click Me</button>

تگ <button> یک دکمه در زیر نوار پیشرفت ایجاد میکند که با کلیک روی آن، نوار کامل می شود.

قدم دوم: اضافه کردن کد CSS

در گام دوم باید استایل نوار پیشرفت را تعیین کنیم. کد CSS زیر را به فایل استایل خود اضافه کنید. میتوانید این کد را به صورت توکار در فایل اصلی قالب هم قرار دهید:

#myProgress {
 position: relative;
 width: 100%;
 height: 30px;
 background-color: grey;
 }
 #myBar {
 position: absolute;
 width: 1%;
 height: 100%;
 background-color: green;
 }

در کد بالا، myProgress یک ظرف با پس زمینه خاکستری ایجاد می کند. این ظرف همان جایی است که نوار پیشرفت اصلی درون آن پر می شود. myBar هم همان نوار پیشرفت اصلی است که در حالت پایه عرضی برابر با یک درصد از ظرف را دارد. نتیجه کد بالا به شکل زیر است:

نوار پیشرفت انیمیشنی با جاوااسکریپت

قدم سوم: اضافه کردن کد جاوااسکریپت

حال با اضافه کردن کد جاوااسکریپت زیر، حالت انیمیشنی نوار پیشرفت را ایجاد میکنیم. بهتر است کد زیر را قبل از تگ پایان <body/> قرار دهید:

<script>
 function move() {
 var elem = document.getElementById("myBar");
 var width = 1;
 var id = setInterval(frame, 10);
 function frame() {
 if (width >= 100) {
 clearInterval(id);
 } else {
 width++;
 elem.style.width = width + '%';
 }
 }
 }
 </script>

ما در کد html که اول کار اضافه کردیم، برای تگ <button> خصوصیت onclick=”move()” را تعیین کرده بودیم. یعنی زمانی که روی این دکمه کلیک شد تابع onclick() اجرا شود. این تابع را در کد جاوااسکریپت بالا میبنید. عملیاتی که در این تابع باید انجام شود، بین دو آکولاد {} نوشته شده اند. این عملیات، عرض نوار پیشرفت که در ابتدا ۱ درصد بود را تبدیل به ۱۰۰ درصد می کنند.

نتیجه را میتوانید اینجا ببینید. پس از آنکه صفحه باز شد، روی دکمه Click Me کلیک کنید.

اضافه کردن درصد به صورت عددی

اگر میخواهید میزان پیشرفت را به صورت عددی هم در کنار یا داخل نوار پیشرفت نشان دهید، کد زیر را در جای دلخواه قرار دهید:

<div id="label">10%</div>

مثلا ما میخواهیم عدد را درون نوار پیشرفت بنویسیم، پس کد بالا را داخل دیو myBar میگذاریم:

<div id="myProgress">
 <div id="myBar">
 <div id="label">10%</div>
 </div>
 </div>

پس از آن کد CSS زیر را به استایل خود اضافه کنید:

/* If you want the label inside the progress bar */
 #label {
 text-align: center; /* If you want to center it */
 line-height: 30px; /* Set the line-height to the same as the height of the progress bar container, to center it vertically */
 color: white;
 }

در نهایت هم کد جاوااسکریپت زیر را به فایل خود قبل از تگ پایان <body/> اضافه کنید. توجه داشته باشید که اگر کد جاوااسکریپت قبلی که معرفی کردیم را اضافه کردید، باید آنرا حذف کرده و این یکی(!) را جایگزین کنید:

<script>
 function move() {
 var elem = document.getElementById("myBar");
 var width = 10;
 var id = setInterval(frame, 10);
 function frame() {
 if (width >= 100) {
 clearInterval(id);
 } else {
 width++;
 elem.style.width = width + '%';
 document.getElementById("label").innerHTML = width * 1 + '%';
 }
 }
 }
 </script>

نتیجه را میتوانید از لینک زیر ببینید. همچنین میتوانید پروژه نهایی را دانلود کنید.

لينک دانلود:

تبلیغات

نویسنده (مدیر سایت)

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

پاسخ دهید

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