تخفیف ویژه

کدهای جذاب و دیدنی ( Loading Animation One Element ) : ساخت لودینگ زیبا با CSS

دسته بندی: HTML و CSS
زمان مطالعه: 1 دقیقه
۱۵ مرداد ۱۳۹۵

در این قسمت میخوام یک کد ( Loading Animation One Element ) جالب رو در اختیارتون بزارم.

Loading Animation One Element

همونطور که دیدید لودر زیبا و جالب قرار داده شده و هم حرکت چرخشی داره و هم حرکت سوئیچی و رفت و برگشتی.

کدهای HTML:

<div id="loading"></div>

کدهای CSS:

body {
  padding: 25px;
  background: #000;
}

#loading {
  position: relative;
  margin: 2em auto 0em;
  width: 10em;
  height: 5em;
  background: #FEdd00;
  border-radius: 50%/100%;
  -webkit-transform: rotate(0deg);
  box-shadow: 0em 0em 0em 1em #FEdd00 inset, 0em 0em 0em 2em #000 inset;
  animation: rotateloader 1s linear infinite;
}

#loading:after {
  content: "";
  position: absolute;
  right: 0em;
  bottom: 0em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background: #000;
  box-shadow: 0em 0em 0em 1em #FEdd00 inset;
  animation: move 1s linear infinite;
}

@keyframes rotateloader {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes move {
  0% {
    right: 0em;
  }
  50% {
    right: 5em;
  }
  100% {
    right: 0em;
  }
}

موفق باشید.

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :