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

کد نوار پیشرفت دایره ای:

حتما تابحال در وب سایت خود خواسته اید مقدار پیشرفت خود را نشان دهید!

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

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

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

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

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

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

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

<link rel=”stylesheet” href=http://backingweb.ir/yhsth”>

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

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="progress red codenvis70">
                <span class="progress-left">
                    <span class="progress-bar"></span>
                </span>
                <span class="progress-right">
                    <span class="progress-bar"></span>
                </span>
                <div class="progress-value">70%</div>
            </div>
        </div>
    </div>
</div>

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

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

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

و نام رنگ بندی هم به ترتیب زیر هستش که براتون مینویسم

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

به جای red میتونید هر رنگی که میخواید رو از لیست بالا انتخاب کنید و در کد بنویسید ،

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


 

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

محسن
2 دی 1396
922 بازدید