You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
758 B
33 lines
758 B
/* public/css/skeleton.css */
|
|
|
|
/* 1. Định nghĩa keyframes cho shimmer */
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(0%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
/* 2. Lớp base cho skeleton */
|
|
.skeleton {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-color: #e2e2e2;
|
|
}
|
|
|
|
/* 3. Pseudo-element để tạo shimmer */
|
|
.skeleton::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; left: -150%;
|
|
width: 150%; height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(255,255,255,0) 0%,
|
|
rgba(255,255,255,0.5) 50%,
|
|
rgba(255,255,255,0) 100%
|
|
);
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
/* Tuỳ biến thêm nếu muốn */
|
|
/* .skeleton.rounded { border-radius: .375rem; } */
|
|
/* .skeleton-lg { height: 3.5rem; } */
|
|
|