• کدنویس
  • ماهنامه شماره یک
  • نسخه سوم کدنویس
  • افزونه وردپرس visual composer
  • قالب وردپرس صحیفه
  • اسکریپت خبرخوان Rss script light
محل تبلیغات شما
Search
Generic filters
Exact matches only
Filter by Custom Post Type

کدنویس در شبکه های اجتماعی

ساعت
تمامی مطالب, کد های متفرقه, کد و ابزار کد نوار پیشرفت گرد – کد progressbar

آمار و ارقـام سایت


  • 361

    اعضای سایت


  • 8

    قالب وردپرس


  • 11

    افزونه وردپرس


  • 8

    اسکریپت

تو نوشمک چه خبره!











تبـــلیغــات

  • محل تبلیغات شما
  • محل تبلیغات شما
  • محل تبلیغات شما

سلام خدمت دوستان کدنویس ، مطلبی رو برای شما آماده کردم با عنوان کد نوار پیشرفت گرد یا همان کد progress bar که با استفاده از اون میتونید درصد پیشرفتتون رو روی هر چیزی نمایش بدهید.

کد نوار پیشرفت گرد یا کد progress bar فقط برای فریم ورک بوت استرپ طراحی شده و در صورتی که سایت یا وبلاگ شما با این فریم ورک طراحی شده باشه میتوانید از کد نوار پیشرفت گرد استفاده کنید.

اگر با بوت استرپ کار کرده باشید و کامپوننت‌های پیش فرض اون رو دیده باشید متوجه نوار پیشرفت ساده و یکسان اون شدید و میدونید که یک خط صاف هستش!

اما در این کد من سعی کردم چیزی رو طراحی کنم که متفاوت با هر کد نوار پیشرفتی که دیدید باشه ، کد نوار پیشرفت گرد به صورت دایره‌ای هستش که تمام ویژگی‌های یک نوار پیشرفت خوب را دارد.

کد progress bar

کد progress bar

کد نوار پیشرفت گرد دارای انیمیشن زیبا و مطمئنا کاربر پسند هستش که با لود شدن صفحه انیمیشن اون فعال میشه و شروع به چرخش تا درصدی که براش تعیین کردید میکنه!

بنده خودم در پروژه‌ای از کد نوار پیشرفت گرد استفاده کردم و وقتی تاثیرش رو توی زیبایی قالب دیدم تصمیم گرفتم اون رو برای شما هم انتشارش بدم.

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

همچنین کد نوار پیشرفت گرد دارای ۱۰ رنگ استاندارد متریال هستش که شامل رنگ‌های زیر میشود

رنگ‌های کد progress bar

  1. قرمز
  2. آبی
  3. نارنجی
  4. زرد
  5. سبز
  6. صورتی
  7. بنفش
  8. کله قازی
  9. طوسی
  10. قهوه‌ای

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

یکی از مزیت‌های بینظیر کد نوار پیشرفت گرد اینه که ، از هیچ جاوا اسکریپت اضافی در اون استفاده نشده و کاملا با Css و Html هستش.

این خصوصیت باعث میشه کد نوار پیشرفت گرد اصلا باعث کاهش سرعت بارگذاری در سایت شما نشه و هیچ فایل جاوا اسکریپی در سایت شما بارگذاری نشه.

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

دقت داشته باشید دوستان در هر ردیف هم ۴ تا از کد progress bar قرار میگیره و سعی کنید اندازه اونو کوچک و بزرگ نکنید چون کلا طراحی به هم میخوره

پیش نمایش کد نوار پیشرفت گرد

پیش نمایش کد نوار پیشرفت گرد

آموزش گذاشتن کد نوار پیشرفت گرد در سایت

در مرحله اول کد زیر رو در قسمت head قالبتون بزارید

محتوای محدود شده. / فقط اعضا میتوانند این پست را ببینند

شما در حال استفاده از نسخه پریمیوم سایت کدنویس هستید ، لذت ببرید 🙂

این قسمت فقط مخصوص اعضای کدنویسه! برای دسترسی به این قسمت میتوانید یا Register انجام بدهید


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

شما در حال استفاده از نسخه پریمیوم سایت کدنویس هستید ، لذت ببرید 🙂

این قسمت فقط مخصوص اعضای کدنویسه! برای دسترسی به این قسمت میتوانید یا Register انجام بدهید


دوستان برای تنظیمات این کد progress bar باید حتما به نکات زیر دقت کنید تا به مشکلی بر نخورید!

برای تغییر درصد پیشرفت به دنبال کلمه codenvis70 بگردید و به جای عدد ۷۰ از ۱۰ تا ۱۰۰ یک عدد قرار بدهید

نکته : باز هم یاد آور میشم این درصد‌ها فقط ۱۰ تا ۱۰ تا جلو میرن مثلا ۱۰ ، ۲۰ ، ۳۰ ، … ، ۹۰ ، ۱۰۰

و برای تغییر رنگ هم دقیقا پشت کلمه codenvis70 ، کلمه red نوشته شده که اسم رنگ میباشد و نام رنگ بندی هم به ترتیب زیر هستش که براتون مینویسم

  • قرمز : red
  • آبی : blue
  • نارنجی : orange
  • زرد : yellow
  • سبز : green
  • صورتی : pink
  • بنفش : purple
  • کله قازی : teal
  • طوسی : grey
  • قهوه‌ای : brown

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

پیش نمایش تمام درصدها و رنگ‌های موجود در کد نوار پیشرفت گرد وجود داره و در پایین میتونید اون رو مشاهده کنید.

امیدوارم از این مطلب هم لذت برده باشید و حتما در سایتتون و در طراحیاتون ازش استفاده کنید و طرح حرفه‌ای بزنید ، اگر از مطالب ما راضی هستید لطفا برای حمایت از ما مطالب رو در شبکه‌های اجتماعیتون به اشتراک بگذارید و یا در شبکه‌های اجتماعی ما ( فیسبوک کدنویس ، توییتر کدنویس ، لینکداین کدنویس ، تلگرام کدنویس ، اینستاگرام کدنویس ، کلوب کدنویس ، فیسنما کدنویس و… ) میتوانید عضو بشوید و از مطالبمون لذت ببرید!

یا علی♥


دیدگاه‌های کاربران

۱ دیدگاه

1
دیدگاه بگذارید

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
خدادادی Recent comment authors
  مشترک  
اعلان
خدادادی
مهمان

سلام سایت خوبی دارید عالیه از نظر آموزش و طراحی بی نظیر موفق باشید


لوگو کدنویس

درباره ما

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

حسین رازقندی / مدیریت سایت
استفاده از مطالب این سایت حتی با ذکر منبع غیر قانونی و حرام بوده . کليه حقوق اين سايت متعلق به مدیریت آن می‌باشد. CodeNvis 2015-2018