مقدمه
درود خدمت شما علاقه مندان به آموزش طراحی وب من علیرضا حاتمی نیا با آموزش ویژه امروز تحت عنوان ساخت لودر یا آیکن لودینگ توسط 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; }
بسیار خب تا الان شکل کلی کار به شکل زیر شده است.
فقط کافیه با خصوصیت 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);} }
