Hiệu ứng pre-loader animation facebook

HTML - CSS 17/04/2016 07:00 689
Khi bạn duyệt facebook và khi bạn kéo xuống cuối trang thì facebook sẽ tự động tải thêm những feed cũ hơn. Khi dữ liệu chưa được trả về thì facebook sẽ hiện ra một pre-loader animation khá là đẹp mắt. Thì trong bài viết này mình sẽ hướng dẫn các bạn làm được hiệu ứng này nhé.

Có một bạn hỏi mình làm hiểu ứng này như thế nào? Thì nhân tiện hôm nay cũng khá nhàn rỗi nên mình hướng dấn bạn làm. Thực ra cái này cũng không khó như bạn ý nghĩ và nó cũng có trên mạng rồi và trước mình cũng tham khảo ở trang nào đó. Mình nhớ đó là một trang của một bạn bên Thái Lan. Giờ làm mãi rồi nó cũng quen.

Nó thực chất chỉ phụ thuộc vào một đoạn css còn lại thì hình dạng thế nào thì do bạn tự thiết kế mà thôi. Điều đặc biệt của hiệu ứng này là bạn nhìn thấy một hiệu ứng trông giống như đám may nó cứ chạy đi chạy lại. Các bạn đừng cười chứ từ lúc biết làm cái này tới giờ gần như mình không thay đổi css mà chỉ thay đổi về bố cục mà thôi.

Bạn có thể đặt class giống như mình .preloader đây là đoạn css làm nên hiệu ứng đó.

.preloader {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: placeHolderShimmer;
	animation-name: placeHolderShimmer;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	background: #f6f7f8;
	background: #eeeeee;
	background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
	background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
	background: linear-gradient(to right,  #eeeeee 8%,#dddddd 18%,#eeeeee 33%);
	-webkit-background-size: 800px 104px;
	background-size: 800px 104px;
	height: 120px;
	position: relative;
}
@-webkit-keyframes placeHolderShimmer {
	0% {background-position: -468px 0}
	100% {background-position: 468px 0}
}
@-moz-keyframes placeHolderShimmer {
	0% {background-position: -468px 0}
	100% {background-position: 468px 0}
}

Lưu ý: Trong ví dụ này mình có nhúng file bootstrap nên nếu bạn có copy mà không giống của mình có lẽ bạn đang thiếu boostrap.

<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />

1. HTML

 <div class="preloader-item">
    <div class="preloader">
        <div class="preloader__line_1"></div>
        <div class="preloader__line_2"></div>
        <div class="preloader__line_3"></div>
        <div class="preloader__line_4"></div>
        <div class="preloader__line_5"></div>
        <div class="preloader__line_6"></div>
        <div class="preloader__line_7"></div>
    </div>
</div>

2. CSS

.preloader-item{
	height:200px;
	padding:20px;
	border:1px solid #DDD;
}
.preloader {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: placeHolderShimmer;
	animation-name: placeHolderShimmer;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	background: #f6f7f8;
	background: #eeeeee;
	background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
	background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
	background: linear-gradient(to right,  #eeeeee 8%,#dddddd 18%,#eeeeee 33%);
	-webkit-background-size: 800px 104px;
	background-size: 800px 104px;
	height: 120px;
	position: relative;
}
@-webkit-keyframes placeHolderShimmer {
	0% {background-position: -468px 0}
	100% {background-position: 468px 0}
}
@-moz-keyframes placeHolderShimmer {
	0% {background-position: -468px 0}
	100% {background-position: 468px 0}
}
.preloader:before{
	content:"";
	width:25%;
	height:80px;
	position:absolute;
	left:0;
	top:0;
}
.preloader:after{
	content:"";
	width:5%;
	height:80px;
	background:#FFF;
	position:absolute;
	left:25%;
	top:0;
}
.preloader__line_1{
	width:71%;
	height:20px;
	border-bottom:10px solid #FFF;
	position:absolute;
	left:30%; top:0;
}
.preloader__line_2{
	width:10%;
	height:10px;
	background:#FFF;
	position:absolute;
	left:45%; top:20px;
}
.preloader__line_3{
	width:10%;
	height:10px;
	background:#FFF;
	position:absolute;
	left:75%; top:20px;
}
.preloader__line_4{
	width:71%;
	height:10px;
	background:#FFF;
	position:absolute;
	left:30%;top:30px;
}
.preloader__line_5{
	width:71%;
	height:10px;
	background:#FFF;
	position:absolute;
	left:30%; top:50px;
}
.preloader__line_6{
	width:100%;
	height:10px;
	background:#FFF;
	position:absolute;
	left:0%; top:80px;
}
.preloader__line_7{
	width:100%;
	height:10px;
	background:#FFF;
	position:absolute;
	left:0; top:100px;
}

3. Tổng kết.

Chỉ một vài dòng CSS thôi là bạn đã xây dựng được hiệu ứng khá là đẹp mắt. Bạn cứ tưởng tượng khi người dùng nhấn tải thêm dữ liệu là có một cái pre-loader hiện ra khá sinh động đúng không nào?

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.