Tạo iOS 7 Progress Bar bằng CSS3

Hôm nay mình tranh thủ giới thiệu cho các bạn thêm một mẫu progress bar cực kỳ ấn tượng với hiệu ứng như trên iOS 7.

Xem Demo | Download

HTML

Đầu tiên, các bạn áp dụng khung chuẩn html  như sau :

<div class="progress">

    <div class="progress-bar">

      <div class="progress-shadow"></div>

    </div>

  </div>

CSS

Và đây là toàn bộ đoạn css giúp các bạn tạo hiệu ứng loading giống y hệt trên iOS7, tùy theo trình duyệt mà các bạn cho thêm prefix cho phù hợp nhé :

html,
body {
  height: 100%;
}

body {
  background-color: #f5f7f9;
  color: #6c6c6c;
  font: 300 1em/1.5em "Helvetica Neue", sans-serif;
  margin: 0;
  position: relative;
}

h1 {
  font-size: 2.25em;
  font-weight: 100;
  line-height: 1.2em;
  margin: 0 0 1.5em;
}

/* HELPERS */
.text-center {
  text-align: center;
}

/* GRID */
.container {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* PROGRESS */
.progress {
  background-color: #e5e9eb;
  height: 0.25em;
  position: relative;
  awidth: 24em;
}
.progress-bar {
  animation-duration: 3s;
  animation-name: awidth;
  background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  background-size: 24em 0.25em;
  height: 100%;
  position: relative;
}
.progress-shadow {
  background-image: linear-gradient(to bottom, #eaecee, transparent);
  height: 4em;
  position: absolute;
  top: 100%;
  transform: skew(45deg);
  transform-origin: 0 0;
  awidth: 100%;
}

/* ANIMATIONS */
@keyframes awidth {
  0%, 100% {
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
    awidth: 0;
  }
  100% {
    awidth: 100%;
  }
}

Thế là xong, vậy là mình cũng kịp chia sẻ cho các bạn thêm một hiệu ứng trước khi phải làm một đống công việc , chúc các bạn có thể học thêm nhiều về CSS3 qua bài viết này.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster