طراحی نوار پیشرفت در css

در این مقاله قصد داریم، ساختن نوار های پیشرفت به وسیله ی css را آموزش دهیم .

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

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

کدهای HTML:

در زیر کدهای اچ تی ام ال را می بینید، در ادامه توضیحات بیشتری در مورد کلاس های بکار رفته در این کدها ارائه خواهیم داد:

<div class="progress-bar blue stripes">
    <span style="width: 40%"></span>
</div>

در کدهای بالا یک دایو داریم که درون آن سه کلاس به کار رفته است.و درون این دایو یک تگ span وجود دارد .

در ابتدا کدهای سی اس اس هم بصورت زیر است :

.progress-bar {
    background-color: #1a1a1a;
    height: 25px;
    padding: 5px;
    width: 350px;
    margin: 50px 0;         
    border-radius: 5px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
}

.progress-bar span {
    display: inline-block;
    height: 100%;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    transition: width .4s ease-in-out;    
}

در کلاس progress-bar ابتدا زمینه را می سازیم . این زمینه فعلا به رنگ سیاه است اما بعدا آن را تغییر خواهیم داد.

همچنین در ادامه در کلاس progress-bar span در واقع ما یک span درون کلاس progress-bar ایجاد می کنیم . 

این span در واقع همان قسمت اصلی نوار پیشرفت را ایجاد می کند.

سپس چند کلاس برای رنگ اضافه می کنیم:

در اینجا سه رنگ برای تگ span ایجاد کرده ایم ، رنگ های آبی و نارنجی و سبز .

.blue span {
    background-color: #34c2e3;   
}

.orange span {
      background-color: #fecf23;
      background-image: linear-gradient(top, #fecf23, #fd9215);  
}   

.green span {
      background-color: #a5df41;
      background-image: linear-gradient(top, #a5df41, #4ca916);  
}

 سپس کلاسی را اضافه می کنیم که در واقع یک افکت بر روی میله ی نوار پیشرفت اضافه می کند، و در واقع آن را شیار دار می کند:

.stripes span {
    background-size: 30px 30px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                    transparent 75%);            
    
    animation: animate-stripes 3s linear infinite;             
}

@keyframes animate-stripes {
    0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

در ادامه می خواهیم روش ایجاد شیارها در شکل بالا را توضیح دهیم :

در کدهای بالا، کلاس که شیار ها را ایجاد می کند همان کلاس stripes sapn. است.

ابتدا یک دایو می سازیم  :

<div class="main stripes">

</div>

می خواهیم که یک مستطیل  داشته باشیم تا بر روی این مستطیل این شیارها را ایجاد کنیم و همچنین مستطیل ما باید بزرگ

باشد تا بتوانیم تغییرات را در آن احساس کنیم، پس کلاس main را تعریف می کنیم:

.main{
background-color: #1a1a1a;
height: 250px;
width: 350px;
background-color: #34c3e3;

}

برای ایجاد شیار و درک آن، یک نمونه را از ابتدا می سازیم :

.stripes{

}

حالا می خواهیم یک شیب رنگ در آن ایجاد کنیم ، پس می نویسیم :

.stripes{
 background-size: 50px 50px;
 background-image:linear-gradient(0deg,rgba(255,0,0,1) 25%,transparent 25%,
 transparent 50%, rgba(255,0,0,1) 50%,rgba(255,0,0,1) 75%,transparent 75%);
}

 در توضیح باید گفت که، ابتدا در کد بالا زاویه را مشخص می کنیم که برای سهولت آن را 0 قرار داده ایم .سپس رنگ را تا فاصله ی 25 

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

تا اینجا 2 شیار ، یکی به رنگ قرمز و یکی هم به صورت محو شده ایجاد می شود(و رنگ مستطیل زیرین را به خود می گیرد).

سپس از فاصله ی 50 درصدی تا فاصله ی 75 درصدی را به رنگ قرمز در می آوریم و بعد از فاصله 75 درصدی تا آخر را به صورت 

محو شده در می آوریم.

• قبلی
• بعدی