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

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

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

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

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

 

قدم اول اضافه کردن HTML

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

قدم دوم اضافه کردم استایل های به وسیله ی CSS3

.loader {
  border: 16px solid #f3f3f3; /* خاکستری */
  border-top: 16px solid #3498db; /* آبی */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

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

نکته : برای تغییر سایز میتوانید width و height را تغییر دهید