چهارشنبه , شهریور 1 1396
خانه / جی کوئری / نوار پیشرفت زیبا

نوار پیشرفت زیبا

در این لحظه نوار پیشرفت زیبا رو بهتون معرفی میکنیم

این نوار پیشرفت از css و Jquery ساخته شده

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

و امیدوارم شما هم ازش لذت ببرین

preview

آموزش استفاده:

برای افزودن استایل ها،کتابخانه جی کوئری و کد استفاده، کد زیر رو در تگ head سایتتون کپی کنید:

و همچنین برای افزودن طبق رنگ دلخواه انتخاب میکنید و کد رو در مکان مورد نظرتون می زارید:

امیدوارم به کارتون بیاد

راستی اگه از این مطلب خوشتون اومده،لطفا بهش امتیاز بدین،ممنون

درباره ی مرتضی لطفی نژاد

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

مطلب پیشنهادی

دکمه های اشتراک گذاری انعطاف پذیر

امروز براتون دکمه های اشتراک گذاری انعطاف پذیری رو آماده کردیم که با جی کوئری …

5 دیدگاه

  1. درود
    از مطلب تشکر میکنم واقعاً نواز زیبایی هست
    همانطور که در نوار قبلی گفتید من این نوار را نصب کردم تا همه ی نوار ها با هم هم زمان فعال شوند فقط یک سوال داشتم که اگر لطف کنید و راهنماییم کنید ممنون میشم
    در قسمت Css این ابزار من تونستم اندازه ی دو کادر ابزار (کادر اولی و کادر پس زمینه) رو کوچیک کنم ولی نتونستم اندازه ی مقادیر مربوط به رنگ ها رو کوچیک کنم یعنی مثلاً 75% از کادر میزنه بیرون (در یک بلوک کوچیک ازش استفاده میکنم)
    سپاس

    • مرتضی لطفی نژاد

      با سلام
      اگه منظورتون دقیقا عدد 75% هست که می تونید توی فایل style.css کلاس .label رو پیدا کنید و اندازه font-size: 12px; رو کم کنید تا به اندازه مورد دلخواه برسین

  2. نه نه ببینید Laebl مشکلی نداره نوار رنگی که به صورت انیمیشنی باید میزان پیشرفت رو نشون بده از کادرش که کوچیک کردم میزنه بیرون
    از مشکل عکس گرفتم ببینید :
    http://up.vbiran.ir/uploads/SS_13712138943447424135.png
    سپاس

    • مرتضی لطفی نژاد

      با سلام مجدد
      برای اینکار شما فایل index.html رو باز میکنید و در اون خط های زیر رو پیدا کنید

      barperc = Math.round(dataperc * 5.56);
      perc = Math.round(parseInt(length) / 5.56),
      

      عدد 5.56 رو کم کنید تا به مقدار مورد نظر برسین
      موفق باشید

  3. خیلی ممنونم
    مشکلم حل شد :)

پاسخ دهید

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

به خانواده بزرگ فارس اسکریپت بپیوندید

با عضویت در سایت فارس اسکریپت به مطالب بروز کسب درآمد از طراحی صفحات وب و طراحی قالب دست خواهید یافت

Powered by themekiller.com