Preloader đầy màu sắc với CSS3

Chào các bạn, đã lâu rồi không post thêm bài viết nào, tranh thủ chút ít thời gian mình xin chia sẻ cho các bạn một hiệu ứng preloader cũng khá đẹp mắt, các bạn có thể áp dụng nó vào trong các web app của các bạn.

Xem Demo | Download

HTML

<div class="wrapper">
  <div class="progressbar">
    <div class="stylization"></div>
  </div>
</div>

CSS

body,
html,
.wrapper {
  awidth: 100%;
  height: 100%;
}
.wrapper {
  position: relative;
  background: #e7f0f7;
}
.progressbar {
  display: block;
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  awidth: 400px;
  height: 30px;
}
.progressbar::before,
.progressbar::after {
  content: ';
  display: block;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  awidth: 100%;
  height: 100%;
  border-radius: 15px;
  background-image: -webkit-linear-gradient(0deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
  background-image: linear-gradient(90deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
  background-position: 0 0;
  background-repeat: repeat-x;
  -webkit-animation: movebar 5s linear infinite;
          animation: movebar 5s linear infinite;
}
.progressbar::before {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,0.1);
}
.progressbar::after {
  z-index: 9;
  top: 6px;
  -webkit-filter: blur(16px);
          filter: blur(16px);
  opacity: 0.7;
}
.stylization {
  position: absolute;
  z-index: 999;
  height: 4px;
  awidth: 90%;
  left: 5%;
  top: 6px;
  opacity: 0.3;
}
.stylization::before,
.stylization::after {
  content: ';
  display: block;
  position: absolute;
  height: 4px;
  top: 0;
  border-radius: 2px;
}
.stylization::before {
  background: #fff;
  left: 0;
  right: 10px;
}
.stylization::after {
  awidth: 6px;
  background: #fff;
  right: 0;
}
@-webkit-keyframes movebar {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 0;
  }
}
@keyframes movebar {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 0;
  }
}

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

Chuyên Mục: Css

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