[Bootstrap 4] Phần 15: Spinner (Con quay) nâng cao

Ở phần trước, bạn đã học cách tạo Spinner đơn giản, ở phần này bạn sẽ tiếp tục học các cách tùy biến Spinner để giúp cho bạn có nhiều cách hiển thị Spinner đa dạng hơn trên trang Web.

Canh lề cho Spinner

Sử dụng thuộc tính Margin, Padding

Để canh lề cho Spinner, bạn buộc phải sử dụng một số lớp canh lề như theo khoảng trắng như .m, .m-1,…,.m-5 (margin) và .p, .p-1,…, .p-5 (padding). Ví dụ canh lề bằng lớp .m-5 có nghĩa bạn cách lề theo thuộc tính margin: 3rem!important;. Trong đó rem là 1 đơn vị kích thước font chữ, bạn thêm tìm hiểu thêm ở bài So sánh các đơn vị đo kích thước font trong HTML.

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
	<h2>Canh lề Spinner bằng lớp m-5</h2>
	<div class="spinner-border m-5" role="status">
		<span class="sr-only">Đang tải...</span>
	</div>
</div>
 
</body>
</html>

Flexbox

Ngoài cách sử dụng thuộc tính margin và padding, bạn còn có thể sử dụng flexbox như sau.

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
	<h4>Canh giữa Spinner bằng flexbox --- dammio.com</h4>
	<div class="d-flex justify-content-center">
	<div class="spinner-border" role="status">
		<span class="sr-only">Đang tải...</span>
	</div>
	</div>
</div>
 
</body>
</html>

Float

Bạn cũng có thể dùng khái niệm float-left, float-right để canh lề cho Spinner.

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
	<h4>Canh giữa Spinner bằng float-right, float-left --- dammio.com</h4>
	<div class="clearfix">
	<div class="spinner-border float-right" role="status">
		<span class="sr-only">Loading...</span>
	</div>
	
	<div class="clearfix">
	<div class="spinner-border float-left" role="status">
		<span class="sr-only">Loading...</span>
	</div>
	
</div>
</div>
 
</body>

Canh dòng văn bản

Bạn còn có thể canh lề cho Spinner bằng các thuộc tính text-align, text-center.

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
	<h4>Canh giữa Spinner bằng text-center --- dammio.com</h4>
	<div class="text-center">
	<div class="spinner-border" role="status">
		<span class="sr-only">Đang tải...</span>
	</div>
	</div>
	
</div>
</div>
 
</body>
</html>

Tạo hình cho Spinner

Tạo hình bằng thuộc tính border-radius

Thuộc tính .border-radius dùng để tạo góc bo tròn cho một đối tượng trong HTML. Bạn có thể sử dụng thuộc tính này để tạo ra các hình Spinner khác nhau như sau.

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Tạo hình cho Spinner bằng thuộc tính border-radius --- dammio.com</h2>
  <p>Sử dụng border-radius với giá trị từ 0 đến 50% để tạo hình:</p>
                                         
  <div class="spinner-border text-muted" style="border-radius:0%"></div>
  <div class="spinner-border text-primary" style="border-radius:5%"></div>
  <div class="spinner-border text-success" style="border-radius:15%"></div>
  <div class="spinner-border text-info" style="border-radius:25%"></div>
  <div class="spinner-border text-warning" style="border-radius:35%"></div>
  <div class="spinner-border text-danger"></div>


  <div class="spinner-grow text-muted" style="border-radius:0%"></div>
  <div class="spinner-grow text-primary" style="border-radius:5%"></div>
  <div class="spinner-grow text-success" style="border-radius:15%"></div>
  <div class="spinner-grow text-info" style="border-radius:25%"></div>
  <div class="spinner-grow text-warning" style="border-radius:35%"></div>
  <div class="spinner-grow text-danger"></div>
</div>
 
</body>
</html>

Tạo hình thuộc tính width, height

Để có nhiều dạng Spinner lạ lùng hơn nữa, bạn có thể kết hợp thêm thuộc tính width và height trong CSS như sau.

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Tạo hình cho Spinner bằng thuộc tính width, height --- dammio.com</h2>

  <div class="spinner-border text-muted" style="width:0rem"></div>
  <div class="spinner-border text-primary" style="width:1rem"></div>
  <div class="spinner-border text-success" style="width:2rem"></div>
  <div class="spinner-border text-info" style="width:3rem"></div>
  <div class="spinner-border text-warning" style="width:4rem"></div>
  <div class="spinner-border text-muted" style="width:10rem;height:10rem"></div>
  <div class="spinner-border text-danger"></div>
  
  <div class="spinner-grow text-muted" style="width:0rem"></div>
  <div class="spinner-grow text-primary" style="width:1rem"></div>
  <div class="spinner-grow text-success" style="width:2rem"></div>
  <div class="spinner-grow text-info" style="width:3rem"></div>
  <div class="spinner-grow text-warning" style="width:4rem"></div>
  <div class="spinner-grow text-danger" style="width:10rem;height:10rem"></div>
  <div class="spinner-grow text-danger"></div>
</div>
 
</body>
</html>

Tạo hình thuộc tính border-right-color

Thuộc tính này giúp tạo một Spinner dạng mặc định không bị khuyết 1 cung trong vòng tròn hoặc tô màu cung đó bằng màu sắc khác thay vì màu transparency (trong suốt). Nếu bạn áp dụng với thuộc tính width hoặc height, bạn sẽ có dạng Spinner quay bất đối xứng như sau.

<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Tạo hình cho Spinner bằng thuộc tính border-right-color và width, height --- dammio.com</h2>

                                         
  <div class="spinner-border text-muted" style="border-right-color:initial;width:0rem"></div>
  <div class="spinner-border text-primary" style="border-right-color:initial;width:1rem"></div>
  <div class="spinner-border text-info" style="border-right-color:initial;width:3rem"></div>
  <div class="spinner-border text-warning" style="border-right-color:initial;width:4rem"></div>
  
  <div class="spinner-border text-muted" style="border-right-color:initial;height:0rem"></div>
  <div class="spinner-border text-primary" style="border-right-color:initial;height:1rem"></div>
  <div class="spinner-border text-info" style="border-right-color:initial;height:3rem"></div>
  <div class="spinner-border text-warning" style="border-right-color:initial;height:4rem"></div>
  
  <div class="spinner-border text-muted" style="border-right-color:blue;"></div>
  <div class="spinner-border text-primary" style="border-right-color:red;"></div>
  <div class="spinner-border text-info" style="border-right-color:green;"></div>
  <div class="spinner-border text-warning" style="border-right-color:pink;"></div>

</div>
 
</body>
</html>

Kết luận

Bài viết đã cung cấp cho bạn nhiều ví dụ để bạn có thể canh chỉnh, tạo hình cho con quay với hình thái khác nhau. Mời bạn tiếp tục theo dõi bài tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: [Bootstrap 4] Phần 13: Thanh tiến trình

Trích dẫn bài viết

APA:
Dammio. (2019). [Bootstrap 4] Phần 15: Spinner (Con quay) nâng cao. https://www.dammio.com/2019/12/10/bootstrap-4-phan-15-spinner-con-quay-nang-cao.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[Bootstrap 4] Phần 15: Spinner (Con quay) nâng cao}, year = {2019}, url = {https://www.dammio.com/2019/12/10/bootstrap-4-phan-15-spinner-con-quay-nang-cao}, urldate = {2024-12-07} }