Tạo hiệu ứng loading theo kiểu Windows phone với CSS3

Cập nhật: Lượt xem: 969 [ Css ]

Nếu các bạn đã cảm thấy chán với các kiểu hiệu ứng loading cho trang web được làm từ các ảnh với đuôi .gif.  Thì hôm nay, trong bài viết này,  Laptrinhweb sẽ chia sẻ cho các bạn một hiệu ứng loading làm bằng CSS3 theo phong cách Windows phone.

Tạo hiệu ứng loading theo kiểu Windows phone với CSS3

Thủ thuật để tạo ra hiệu ứng loading này cũng đơn giản thôi, đầu tiên chúng ta sẽ cần đoạn  html như sau :

<span>Loading</span>
    <span class="l-1"></span>
    <span class="l-2"></span>
    <span class="l-3"></span>
    <span class="l-4"></span>
    <span class="l-5"></span>
    <span class="l-6"></span>

Và đây là toàn bộ đoạn CSS giúp các bạn tạo hiệu ứng loading:

span {
	display: block;
	margin: 0 auto;
}

span[class*="l-"] {
	height: 4px; width: 4px;
	background: #000;
	display: inline-block;
	margin: 12px 2px;

	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;

	-webkit-animation: loader 4s infinite;
	-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	-webkit-animation-fill-mode: both;
	-moz-animation: loader 4s infinite;
	-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	-moz-animation-fill-mode: both;
	-ms-animation: loader 4s infinite;
	-ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	-ms-animation-fill-mode: both;
	animation: loader 4s infinite;
	animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	animation-fill-mode: both;
}

span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}

@-webkit-keyframes loader {
	0% {-webkit-transform: translateX(-30px); opacity: 0;}
	25% {opacity: 1;}
	50% {-webkit-transform: translateX(30px); opacity: 0;}
	100% {opacity: 0;}
}

@-moz-keyframes loader {
	0% {-moz-transform: translateX(-30px); opacity: 0;}
	25% {opacity: 1;}
	50% {-moz-transform: translateX(30px); opacity: 0;}
	100% {opacity: 0;}
}

@-keyframes loader {
	0% {-transform: translateX(-30px); opacity: 0;}
	25% {opacity: 1;}
	50% {-transform: translateX(30px); opacity: 0;}
	100% {opacity: 0;}
}

@-ms-keyframes loader {
	0% {-ms-transform: translateX(-30px); opacity: 0;}
	25% {opacity: 1;}
	50% {-ms-transform: translateX(30px); opacity: 0;}
	100% {opacity: 0;}
}

Chìa khóa chính trong việc tạo hiệu ứng là tận dụng animation có sẵn trong CSS3. Mình hy vọng qua bài viết này, các bạn sẽ có thêm lựa chọn cho hiệu ứng loading trong trang web hay blog của mình. Đồng thời cũng là nguồn tài liệu tham khảo cho các bạn có nhu cầu tìm hiểu kỹ hơn về CSS3 và những thuộc tính của nó mang lại.

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