آموزش ساخت آیکن لودینگ یا Loader در CSS3

1396/4/19 علیرضا حاتمی نیا 1718

مقدمه

درود خدمت شما علاقه مندان به آموزش طراحی وب من علیرضا حاتمی نیا با آموزش ویژه امروز تحت عنوان ساخت لودر یا آیکن لودینگ توسط CSS در خدمت شما هستم. 
برای یادگیری این بخش شما بایستی با موارد زیر آشنایی داشته باشید : 
  • HTML
  • CSS3

ساخت آیکون Loader توسط CSS3

شیوه کلی کار به این صورت است که ابتدا یک div در html تعریف می کنیم و کلاسی به نام loader به آن نسبت می دهیم 
<div class="loader"></div>
سپس در CSS خصوصیت border را برای کلاس loader با ضخامت 20px و رنگ transparent تعریف می کنیم. از آنجایی که آیکن loader بایستی در این مثال گرد باشد پس مقدار border-radius را برای این کلاس برابر 50% قرار می دهیم. خب تا به اینجا یک دایره تعریف کردیم که اندازه این دایره را نیز می توانیم توسط خصوصیات with و height تعریف کنیم. همچنین یکی از border های top,left,right,bottom را با رنگ مورد نظر برای این div تعریف می کنیم. می توانیم هر 4 جهت را با رنگ های مختلف نیز تعریف کنیم. این کاملا سلیقه ای می باشد. 
.loader {
    border: solid 17px transparent;
    border-top: solid 17px blue;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

بسیار خب تا الان شکل کلی کار به شکل زیر شده است. 

CSS3 circle

فقط کافیه با خصوصیت animation و تعریف keyframe تعیین کنیم که این دایره به صورت مداوم حول مرکز خود به صورت 360 درجه بچرخد. 
در این مثال نام keyframe را myLoader گذاشتیم. 
@keyframes myLoader {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
{

حال فقط کافیه در کلاس loader خصوصیت animation را برای آن تعریف کنیم 

animation: myLoader 2s linear infinite;

سورس کامل CSS به صورت زیر می شود. 

.loader {
    border: solid 17px transparent;
    border-top: solid 17px blue;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: myLoader 2s linear infinite;
}

@keyframes myLoader {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}