LazyCodet 
20:33:06 20/3/2025 - 0 lượt xem

Hiệu ứng loading | Loading effect

​

Hiệu ứng loading

Loading kiểu hình tròn xoay​

Dưới đây là các mẫu loading dạng hình tròn

Cơ bản​

​

​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="loading.css">
</head>
<body>
  <div class="app">
    <div class="loading"></div>
  </div>
</body>
</html>
.app{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.loading{
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 7px solid aqua;
  border-top-color: red;
  animation: spinner 1s infinite ease;
  /* animation: spinner 1s infinite linear; */ /* quay tròn đều **/
}

@keyframes spinner {
  from{
    transform: rotate(0); /* *rotate : xoay vòng */
  }
  to{
    transform: rotate(360deg);
  }
}

Đây là ví dụ cơ bản nhất về loading effect