NỘI DUNG BÀI VIẾT
Spinner trong Bootstrap 4 (tạm dịch là con quay) là một thành phần mới trong Bootstrap, dùng để mô tả hình ảnh hiệu ứng trạng thái đang tải hoặc trạng thái chờ đợi của một thao tác nào đó.
Tạo Spinner trong Bootstrap 4
Để tạo Spinner, bạn chỉ cần sử dụng lớp .spinner-border, lớp này sẽ tạo Spinner mặc định là màu đen.
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="spinner-border"></div>
</div>
</body>Code language: HTML, XML (xml)Tô màu cho Spinner
Sau khi tạo Spinner, bạn muốn có thêm màu sắc thì tương tự các thành phần Bootstrap khác, bạn có thể thêm các lớp màu sắc bối cảnh như .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-dark, và .text-light như ví dụ sau.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
</div>
</body>
</html>Code language: HTML, XML (xml)Spinner Growing (kiểu Spinner chấm tín hiệu hình tròn)
Bạn có thể dùng kiểu tín hiệu tròn để tạo sự đa dạng cho giao diện Web bằng cách sử dụng lớp .spinner-grow và cũng tương tự dùng các lớp bối cảnh màu sắc để tạo màu cho các chấm tín hiệu tròn này.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
</div>
</body>
</html>Code language: HTML, XML (xml)Kích thước Spinner
Để tạo các kích thước nhỏ cho Spinner, bạn có thể dùng các lớp như .spinner-border-sm hoặc .spinner-grow-sm như ví dụ sau. Lớp .spinner-border là mô tả Spinner có kích thước mặc định.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
</div>
</body>
</html>Code language: HTML, XML (xml)Spinner trong nút nhấn
Spinner còn có thể kết hợp với nút nhấn, textbox để tạo ra nhiều hiệu ứng giúp người dùng tương tác với giao diện Web tốt hơn. Sau đây là cách thêm 1 spinner vào nút nhấn.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
</div>
</body>
</html>Code language: HTML, XML (xml)Kết luận
Như vậy phần này chỉ cho bạn cách đơn giản để tạo Spinner trong Bootstrap 4, tuy nhiên chừng này thật sự là chưa đủ và đa dạng để bạn có thể làm dự án thực tế. Mời bạn tiếp tục theo dõi phần Spinner nâng cao tiếp theo.
Các bạn có thể tham khảo các bài viết hay về Bootstrap tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
