CSS Loader – Cách sử dụng Loader trong CSS

CSS Loader là một phần của trang web được sử dụng để thông báo cho khách truy cập biết rằng trang web đang tải và họ cần phải đợi trong vài giây. Nó rất hữu ích khi một trang web mất vài giây để tải nội dung. Nếu không sử dụng loader trên trang web, khách truy cập có thể nghĩ rằng trang web không phản hồi. Sử dụng CSS Loader giúp cho khách truy cập không phải chờ đợi quá lâu cho trang web tải xong.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Loader là gì?

CSS Loader là một loại animation trong website giúp người dùng biết được trang web đang tải dữ liệu và họ cần phải đợi vài giây để hiển thị nội dung được trình bày đầy đủ. CSS Loader giúp khách truy cập không bị phân tâm hay nghi ngờ về việc trang web có phản hồi hay không.

Hướng dẫn CSS Loader

CSS Loader là một trình tải tệp CSS cho Webpack. Nó cho phép bạn tải các tệp CSS của mình theo cách hiệu quả và linh hoạt.

Cài đặt CSS Loader

Để cài đặt CSS Loader, bạn có thể sử dụng lệnh sau:

npm install --save-dev css-loader

Để sử dụng CSS Loader, bạn cần thêm nó vào cấu hình Webpack của mình. Dưới đây là một ví dụ về cách sử dụng CSS Loader:

// webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Trong ví dụ trên, chúng tôi đang sử dụng CSS Loader để tải tệp CSS style.css. Tệp CSS này sẽ được tải sau tệp JavaScript index.js.

Các tùy chọn CSS Loader

CSS Loader có một số tùy chọn mà bạn có thể sử dụng để kiểm soát cách nó hoạt động. Dưới đây là một số tùy chọn phổ biến:

• url: Tùy chọn này cho phép bạn chỉ định cách CSS Loader xử lý các đường dẫn URL trong CSS của bạn. Theo mặc định, CSS Loader sẽ giải quyết các đường dẫn URL này giống như các đường dẫn URL JavaScript. Tuy nhiên, bạn có thể sử dụng tùy chọn này để thay đổi cách CSS Loader xử lý các đường dẫn URL này.
• import: Tùy chọn này cho phép bạn chỉ định cách CSS Loader xử lý các lệnh @import trong CSS của bạn. Theo mặc định, CSS Loader sẽ giải quyết các lệnh @import này giống như các lệnh import JavaScript. Tuy nhiên, bạn có thể sử dụng tùy chọn này để thay đổi cách CSS Loader xử lý các lệnh @import này.
• sourceMap: Tùy chọn này cho phép bạn tạo bản đồ nguồn cho các tệp CSS của mình. Bản đồ nguồn này có thể hữu ích cho việc gỡ lỗi CSS của bạn.

Để tạo ra một CSS Loader đơn giản, bạn chỉ cần sử dụng các thuộc tính của CSS như border, border-radius, width, height và animation. Dưới đây là một số ví dụ về CSS Loader:

Ví dụ 1

.loader {
  border: 16px solid 
# f3f3f3;
  border-top: 16px solid 
# 3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Trong ví dụ này, chúng ta sử dụng thuộc tính border để thiết lập màu và kích thước của loader. Chúng ta cũng sử dụng thuộc tính border-radius để biến đổi loader thành hình tròn. Chúng ta sử dụng thuộc tính border-top để tạo ra vật thể màu tím quay quanh trong khung. Kích thước loader được xác định bằng cách sử dụng thuộc tính width và height. Cuối cùng, chúng ta đã thêm một animation để làm cho vật thể tím xoay không ngừng với tốc độ animation là 2 giây.

Ví dụ 2

.loader {
  border: 10px solid 
# f3f3f3;
  border-top: 10px solid 
# 3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Đây là một ví dụ khác về CSS Loader đơn giản. Chúng ta sử dụng các thuộc tính border, border-radius, width, height và animation để tạo ra một spinner xoay không ngừng.

Ví dụ 3

.loader {
  border: 16px solid 
# f3f3f3;
  border-top: 16px solid 
# 3498db;
  border-bottom: 16px solid 
# 3498db;
  border-left: 16px solid 
# 3498db;
  border-right: 16px solid 
# 3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Ví dụ này tương tự như ví dụ 1, nhưng được thêm vào các thuộc tính border-bottom, border-left và border-right để tạo ra một spinner với đường viền dày hơn.

Bên dưới là một ví dụ thực tế:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>css loader</title> 
    <style> 
        h1{ 
            color:red; 
        } 
        div{ 
            display: block; 
            position: absolute; 
            width: 10px; 
            height: 10px; 
            left: calc(50% - 1em); 
            border-radius: 1em; 
            transform-origin: 1em 2em; 
            animation: rotate; 
            animation-iteration-count: infinite; 
            animation-duration: 1.6s; 
        } 
   
        @keyframes rotate { 
              0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); } 
        } 
        .d1 { 
            animation-delay: 0.1s; 
            background-color: blue; 
        } 
        .d2 { 
            animation-delay: 0.2s; 
            background-color: red; 
        } 
        .d3 { 
            animation-delay: 0.3s; 
            background-color: yellow; 
        } 
        .d4 { 
            animation-delay: 0.4s; 
            background-color: green; 
        } 
        .d5 { 
            animation-delay: 0.5s; 
            background-color: magenta; 
        } 
    </style> 
</head> 
<body> 
    <center>  
        <h1>CSS Loader</h1> 
        
            <div class='d1'></div> 
            <div class='d2'></div> 
            <div class='d3'></div> 
            <div class='d4'></div> 
            <div class='d5'></div> 
      
    </center> 
</body> 
  
</html>

Ưu và Nhược điểm CSS Loader

Ưu điểm

CSS Loader giúp khách truy cập biết rằng trang web đang tải và họ cần phải đợi vài giây để hiển thị nội dung được trình bày đầy đủ. Nó giúp trang web trông chuyên nghiệp hơn và giảm thiểu sự khó chịu của khách truy cập trước khi trang web được tải xong.

Nhược điểm

Tuy nhiên, sử dụng quá nhiều CSS Loader có thể làm giảm trải nghiệm người dùng. Việc sử dụng quá nhiều CSS Loader trên một trang web có thể gây ra sự phân tâm và làm giảm tốc độ tải trang web.

Lời khuyên CSS Loader

Để sử dụng CSS Loader hiệu quả, bạn nên biết cách sử dụng số lượng hợp lý. Trang web không nên có quá nhiều loader và cũng không nên thiếu loader. Bạn cần sử dụng loader một cách hợp lý để giúp khách truy cập biết rằng trang web đang tải và họ cần phải đợi một chút.

Ngoài ra, bạn cũng nên tối ưu hóa trang web của mình để giảm thiểu thời gian tải trang web. Bạn có thể sử dụng các công cụ như Google PageSpeed Insights để kiểm tra tốc độ tải của trang web của mình và xem những điểm cần được cải thiện để tăng tốc độ tải trang web.