Tạo Thanh Loading Xoay Với HTML Và CSS - Freetuts

Trang chủ » Hiệu ứng Loading Css » Tạo Thanh Loading Xoay Với HTML Và CSS - Freetuts

Có thể bạn quan tâm

Con xoay hay còn gọi là spinner là một hiệu ứng không thể thiếu trong web hiện đại. Gần như bất cứ trang web nào cũng sử dụng hiệu ứng này, nhất là sau các thao tác đăng nhập hoặc đăng ký. Mục đích nhằm mang lại sự tương tác giữa web với người dùng tốt hơn. Trong bài viết này, Freetuts sẽ hướng dẫn các bạn tạo ra con xoay chờ như hình bên dưới. Nào chúng ta cùng bắt đầu nhé.

test php

banquyen pngBài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

thanh loading xoay jpg

1. Phần HTML

Để tạo một spinner đẹp thì phải có bố cục đẹp, việc dàn trang tốt sẽ thu hút nhiều người dùng hơn.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Spiner</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="spiner.css"> <script src="main.js"></script> </head> <body> <div> <div class="spiner"></div> <div class="bar"> <span class="dot1"></span> <span class="dot2"></span> <span class="dot3"></span> </div> </div> </body> </html>

Cách bố cục cũng khá đơn giản, chỉ gồm thẻ div và thẻ span và lồng nhau không quá nhiều lớp.

Một lưu ý nhỏ là ở đây chúng ta dùng thẻ span để biễu diễn cho dấm chấm động, chúng ta có thể thay thẻ span bằng thẻ khác như thẻ div. Freetuts sẽ giải thích rõ ở phần sau.

Bài viết này được đăng tại [free tuts .net]

2. Phần CSS

Trước hãy cũng lướt qua toàn bộ code CSS.

Xem demo RUN body > div { height: 500px; width: 100%; background-color: #002266; text-align: center; } .spiner { margin-top: 50px; width: 100px; height: 100px; display: inline-block; border: 10px solid white; border-radius: 50%; border-top: 10px solid #ff8000; animation: spiner 1.5s linear infinite; } .bar { margin-top: 50px; display: inline-block; width: 100%; } .bar > span { width: 50px; height: 50px; border-radius: 50%; background-color: #ff8000; display: inline-block; animation: dot 1.5s ease-in-out infinite both; } .bar span.dot1 { animation-delay: -0.3s; } .bar span.dot2 { animation-delay: -0.15s; } .bar span.dot3 { animation-delay: 0s; } @keyframes spiner { to { transform: rotate(360deg); } } @keyframes dot { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

Sau đây, Freetuts sẽ hướng dẫn và giải thích từng bước thực hiện.

Bước 1: định dạng thẻ div chính

body > div { height: 500px; width: 100%; background-color: #002266; text-align: center; }

Ở đây, ta chú ý đến thuộc tính text-align: center việc gán giá trị này sẽ ảnh hưởng đến cách gán thuộc tính display của các thẻ con.

Bước 2: định dạng cho class spiner và bar

.spiner { margin-top: 50px; width: 100px; height: 100px; display: inline-block; border: 10px solid white; border-radius: 50%; border-top: 10px solid #ff8000; animation: spiner 1.5s linear infinite; } .bar { margin-top: 50px; display: inline-block; width: 100%; }

Có một lưu ý là thuộc tính display: inline-block như freetuts đề cập ở bước 1. Do thẻ div cha canh nội dung bằng text-align: center nên để tác dụng lên các thẻ con thì phải thiết lập thuộc tính display: inline-block cho các thẻ con tương ứng.

Bước 3: định dạng thẻ span

.bar > span { width: 50px; height: 50px; border-radius: 50%; background-color: #ff8000; display: inline-block; animation: dot 1.5s ease-in-out infinite both; } .bar span.dot1 { animation-delay: -0.3s; } .bar span.dot2 { animation-delay: -0.15s; } .bar span.dot3 { animation-delay: 0s; }

Thẻ span là phần tạo nên hiện ứng dấu chấm động. Nên điều chắc chắn là cả 3 thẻ span đều dùng chung một loại hiệu ứng. Vấn đề là phải canh chính thời gian trễ sao cho hợp lý để hiệu ứng được mượt và tốc độ vừa phải.

Bước 4: định dạng hiệu ứng

@keyframes spiner { to { transform: rotate(360deg); } } @keyframes dot { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

Sẽ có 2 loại hiệu ứng được tạo ra, spiner là cho vòng xoay, dot là dùng cho dấu chấm động.

Một lưu ý là việc thiết lập các giá trị phần trăm trong hiệu ứng dot có liên qua mật thiết với việc thiết lập thời gian trễ trong từng thẻ span.

3. Lời Kết

Qua bài viết này, freetuts hy vọng giúp các bạn thêm kiến thức để tạo ra hiệu ứng đẹp. Đặc biệt hơn là làm cho trang web trở nên thân thiện hơn với người dùng.

Cảm ơn các bạn. Hẹn gặp lại trong các bài viết sau.

Danh sách file tải về

Tên file tải về Pass giải nén
Tải mã nguồn bài viết freetuts.net hoặc gameportable.net

Từ khóa » Hiệu ứng Loading Css