برنامه نویسی | آموزش ساخت لودینگ در سی اس اس
آموزش ساخت لودینگ در سی اس اس
  • علیرضا
  • ۱۳۹۸-۰۲-۲۷
  • ۵۷۷

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


آموزش ساخت 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 را تغییر دهید

علیرضا

Alireza.kh

نظر شما در مورد این پست چیه؟!