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

تو این پست از سایت  طاووس وب میخوام براتون یه سورس کد نوار پیشرفت گروهی و بسیار ساده قرار بدم. این سورس کد به سادگی با HTML و CSS و زبان برنامه نویسی JS، طراحی شده و شما خیلی ساده میتونید با کپی و پیست کردن کد های اون گزینه های بیشتری بهش اضافه کنید.

برای مشخص کردن درصد پیشرفت کافیست مقدار “data-percent” را در کد های HTML در هر بخش ویرایش کنید که میتواند مقداری بین 0 تا 100 باشد.

پیش نمایش این سورس کد از طریق دکمه زیر قابل مشاهده است و شما میتوانید این سورس کد را از گیت هاب به سادگی دانلود کرده و در پروژه های خود از آن استفاده کنید. با توجه به نیاز خود میتوانید از این سورس کد در مقاله ها، سایت های شخصی، لندینگ پیج و غیره استفاده نمایید.

برای افزودن متغیر شما باید div ای که شامل کلاس skill-box است را تا انتها کپی کنید و پیست کنید و مقادیر مورد نظر خود را به آسانی در آن قرار دهید.