آموزش ساخت Loader با استفاده از Css3

در زمان های قدیم تر اکثر Loading ها به صورت فایل عکسی با پسوند gif بود .

مشکل اصلی این Loading ها عدم پذیرش افزایش سایز و از آن بدتر , رنگ و کیفیت نامطلوب آن بود .

با روی کار آمدن css3 و Jquery راه های آسانتری برای ساخت آنها به وجود آمد که قصد دارم یک راه بسیار ساده و آسان با استفاده از Css3 را برای شما کاربران گرامی آموزش دهم …

در ابتدا کافیست کد زیر را در Html خود قرار دهید :

<div class="vms-loader"></div>

حال کد زیر را در css خود قرار داده :

.vms-loader {
  border: 16px solid #f6f6f6;
  border-radius: 50%;
  border-top: 16px solid #369;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation:loader 2s ease-in-out infinite;
}
@-webkit-keyframes loader{
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

نکته : برای تغییر سایز میتوانید width و height را تغییر دهید و 369# برای رنگ آبی و f6f6f6# برای فضای خالی دور دایره میباشد که میتوانید به راحتی رنگ آن را به دلخواه عوض نمایید.

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی