Hiệu ứng pre-loader animation facebook

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:"";
	awidth:25%;
	height:80px;
	position:absolute;
	left:0;
	top:0;
}
.preloader:after{
	content:"";
	awidth:5%;
	height:80px;
	background:#FFF;
	position:absolute;
	left:25%;
	top:0;
}
.preloader__line_1{
	awidth:71%;
	height:20px;
	border-bottom:10px solid #FFF;
	position:absolute;
	left:30%; top:0;
}
.preloader__line_2{
	awidth:10%;
	height:10px;
	background:#FFF;
	position:absolute;
	left:45%; top:20px;
}
.preloader__line_3{
	awidth:10%;
	height:10px;
	background:#FFF;
	position:absolute;
	left:75%; top:20px;
}
.preloader__line_4{
	awidth:71%;
	height:10px;
	background:#FFF;
	position:absolute;
	left:30%;top:30px;
}
.preloader__line_5{
	awidth:71%;
	height:10px;
	background:#FFF;
	position:absolute;
	left:30%; top:50px;
}
.preloader__line_6{
	awidth:100%;
	height:10px;
	background:#FFF;
	position:absolute;
	left:0%; top:80px;
}
.preloader__line_7{
	awidth: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?