|
| Hướng dẫn tạo hiệu ứng loading đẹp mắt cho blog/website |
Chắc hẳn bạn đã từng cảm thấy nhàm chán với những màn hình tải thông thường khi truy cập vào một website phải không? Vậy tại sao không thay đổi điều đó với một hiệu ứng loading đẹp mắt, thu hút người xem ngay từ cái nhìn đầu tiên? Trong bài viết này, mình sẽ chia sẻ cách tạo hiệu ứng loading cho blog/website với preloader tùy chỉnh, giúp bạn tạo dấu ấn riêng cho blog của mình một cách đơn giản và dễ dàng. Cùng TruongDevs khám phá cách làm này nhé!
Preloader là gì và tại sao nó lại quan trọng?
Preloader là hiệu ứng tải trang được hiển thị khi người dùng truy cập vào website, giúp họ không cảm thấy nhàm chán trong lúc chờ đợi trang web tải xong. Đặc biệt, nếu bạn áp dụng một preloader độc đáo như phong cách Squid Game, người dùng sẽ có một trải nghiệm thú vị ngay từ lần đầu vào trang web của bạn.
Thực ra, preloader không chỉ là một thứ để làm cho website của bạn đẹp hơn mà nó còn giúp cải thiện trải nghiệm người dùng, khiến họ cảm thấy trang web của bạn không bị "treo" hay "chậm". Ai mà không thích một hiệu ứng bắt mắt ngay từ đầu cơ chứ?
Các tính năng tuyệt vời của Preloader TruongDevs
TruongDevs Preloader không chỉ giúp trang web của bạn đẹp mắt mà còn cực kỳ dễ sử dụng. Cùng TruongDevs điểm qua các tính năng nổi bật của nó nhé!
Tương thích với mọi chủ đề Blogger
Dù bạn dùng chủ đề Blogger nào, preloader này cũng sẽ hoạt động hoàn hảo. Cả các chủ đề mới và cũ đều không thành vấn đề!
Hoạt hình mượt mà & phong cách
Preloader này không chỉ đơn giản là loading mà là một hiệu ứng hoạt hình “tiết lộ” và “phát sáng” cực kỳ bắt mắt. Đảm bảo người xem sẽ phải dán mắt vào màn hình cho đến khi trang tải xong.
Tự điều chỉnh theo chủ đề & chế độ tối
Preloader này cực kỳ thông minh, sẽ tự điều chỉnh màu sắc phù hợp với chủ đề của bạn và cả chế độ tối, không cần phải chỉnh sửa gì phức tạp!
Văn bản tải động
Hãy thử nghĩ xem, những câu văn như “Đang kết nối…”, “Đang khởi tạo…”, “Đang tải…” sẽ giúp người xem đỡ cảm thấy chán trong lúc chờ đợi đúng không? Một cách thú vị để giữ người dùng ở lại trang web lâu hơn.
Siêu nhẹ & nhanh
Dù có hiệu ứng đẹp mắt, nhưng preloader này cực kỳ nhẹ và không làm chậm trang web của bạn. Nhờ vào việc sử dụng CSS thuần túy và ít JavaScript, bạn hoàn toàn yên tâm.
Cài đặt siêu dễ
Đừng lo, bạn không phải là chuyên gia để cài đặt đâu! Chỉ với 2 bước đơn giản, bạn có thể thêm preloader này vào blog của mình trong chưa đầy 2 phút!
Xem demo trực tiếp
Trước khi quyết định cài đặt, bạn có thể xem ngay bản demo của preloader này để xem nó sẽ làm cho trang web của bạn trở nên ấn tượng thế nào.
Tạo hiệu ứng loading "Squid Game" dễ dàng chỉ với vài dòng mã
Chắc hẳn bạn đã thấy những hiệu ứng loading kiểu Squid Game trên các website. Bạn cũng muốn thử đúng không? Đừng lo, mình sẽ hướng dẫn chi tiết cách tạo hiệu ứng này cho blog của bạn chỉ với vài dòng mã CSS và HTML đơn giản. Không cần phải là một lập trình viên chuyên nghiệp, bạn vẫn có thể làm được.
Ở đây mình sẽ có 2 version cho bạn lựa chọn, thích cái nào thì lụm cái đó nhen.
Hiệu ứng loading version 1.0
 |
| Hiệu ứng loading SquizGame phiên bản 1.0 |
- Thêm mã CSS
- Thêm mã HTML
Vào Bảng điều khiển Blogger → Chủ đề → Tùy chỉnh → Nâng cao → Tìm "Thêm CSS" từ menu thả xuống và dán mã CSS được cung cấp bên dưới vào hộp. Bạn chỉ cần sao chép mã CSS dưới đây và thêm vào phần Custom CSS trong Blogger.
/* TruongDevs Loader v1.0 - Created By TruongDevs */
/* This preloader is universal and works on any Blogger theme. */
:root {
--truongdevs-primary-color: #007BFF; /* Default Blue: Change this to your blog's main color */
--truongdevs-light-bg: #ffffff;
--truongdevs-dark-bg: #121212;
--truongdevs-light-text: #333333;
--truongdevs-dark-text: #f0f0f0;
}
.TruongDevs-overlay{position:fixed;inset:0;background-color:var(--truongdevs-light-bg);display:flex;align-items:center;justify-content:center;z-index:9999;visibility:visible;opacity:1;transition:opacity .5s ease .5s, visibility .5s ease .5s;}.TruongDevs-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none;}.TruongDevs-container{text-align:center;}.TruongDevs-loader{display:flex;justify-content:center;align-items:center;gap:30px;margin-bottom:20px;}.TruongDevs-shape{width:60px;height:60px;position:relative;}.TruongDevs-shape::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--truongdevs-primary-color);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;transform:scale(0);animation:truongdevs-scale-in 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;}.TruongDevs-shape::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--truongdevs-light-bg);transform-origin:left;transform:scaleX(1);animation:truongdevs-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;}.TruongDevs-shape.circle::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E")}.TruongDevs-shape.triangle::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,95 5,95' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 95,95 5,95' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E")}.TruongDevs-shape.square::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='5' y='5' width='90' height='90' fill='none' stroke='%23000' stroke-width='10'/%3E%3C/svg%3E")}.TruongDevs-shape.circle::before,.TruongDevs-shape.circle::after{animation-delay:0s}.TruongDevs-shape.triangle::before,.TruongDevs-shape.triangle::after{animation-delay:0.2s}.TruongDevs-shape.square::before,.TruongDevs-shape.square::after{animation-delay:0.4s}.TruongDevs-loader-text{position:relative;height:20px;font-size:1rem;font-weight:600;letter-spacing:2px;color:var(--truongdevs-light-text);text-transform:uppercase;overflow:hidden;}.TruongDevs-loader-text span{position:absolute;width:100%;left:0;opacity:0;animation:truongdevs-text-cycle 3s linear infinite;}.TruongDevs-loader-text span:nth-child(1){animation-delay:0s}.TruongDevs-loader-text span:nth-child(2){animation-delay:1s}.TruongDevs-loader-text span:nth-child(3){animation-delay:2s}
@media (prefers-color-scheme: dark) {
.TruongDevs-overlay{background-color:var(--truongdevs-dark-bg)}.TruongDevs-shape::before{background-color:var(--truongdevs-primary-dark-theme, var(--truongdevs-primary-color))}.TruongDevs-shape::after{background-color:var(--truongdevs-dark-bg)}.TruongDevs-loader-text{color:var(--truongdevs-dark-text)}
}
@keyframes truongdevs-scale-in{from{transform:scale(0);filter:blur(10px)}to{transform:scale(1);filter:blur(0);box-shadow:0 0 15px 5px var(--truongdevs-primary-color);}}@keyframes truongdevs-reveal{from{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes truongdevs-text-cycle{0%{transform:translateY(100%);opacity:0}10%{transform:translateY(0);opacity:1}33%{transform:translateY(0);opacity:1}43%{transform:translateY(-100%);opacity:0}100%{transform:translateY(-100%);opacity:0}}
Đặt mã HTML ngay sau thẻ <body> trong phần chỉnh sửa HTML của Blogger.
<!-- TruongDevs Loader - Start -->
<div class='TruongDevs-overlay' id='TruongDevs-preloader'>
<div class='TruongDevs-container'>
<div class='TruongDevs-loader'>
<div class='TruongDevs-shape circle'></div>
<div class='TruongDevs-shape triangle'></div>
<div class='TruongDevs-shape square'></div>
</div>
<div class='TruongDevs-loader-text'>
<span>Connecting...</span>
<span>Initializing...</span>
<span>Loading...</span>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
(function(){
const preloader = document.getElementById('TruongDevs-preloader');
if (preloader) {
window.addEventListener('load', function() {
setTimeout(function() {
preloader.classList.add('hidden');
}, 500);
});
}
})();
//]]>
</script>
Hiệu ứng loading version 1.1
 |
| Hiệu ứng loading SquizGame phiên bản 1.1 |
Các bước vẫn thực hiện tương tự, chỉ cần thay đổi code CSS và HTML là được
Mã CSS
/* TruongDevs Loader v1.1 - Created By TruongDevs */
/* This preloader is universal and works on any Blogger theme. */
:root {
--truong-primary-color: #00ffea;
--truong-bg: #0f0f0f;
--truong-text: #e0e0e0;
--truong-glow: #00ffe0;
}
.TruongDevsLoader-overlay {
position: fixed;
inset: 0;
background: var(--truong-bg);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.TruongDevsLoader-overlay.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.TruongDevsLoader-box {
text-align: center;
color: var(--truong-text);
font-family: "Courier New", monospace;
}
.TruongDevsLoader-icon {
font-size: 2.5rem;
color: var(--truong-primary-color);
animation: glitch 1.2s infinite alternate;
text-shadow: 0 0 5px var(--truong-glow), 0 0 10px var(--truong-glow);
}
.TruongDevsLoader-text {
margin-top: 15px;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
animation: blink 1.5s step-start infinite;
}
.TruongDevsLoader-brand {
margin-top: 20px;
font-size: 0.8rem;
opacity: 0.6;
}
@keyframes blink {
50% { opacity: 0.2; }
}
@keyframes glitch {
0% { transform: translate(0, 0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(2px, -1px); }
60% { transform: translate(-1px, 1px); }
80% { transform: translate(1px, -2px); }
100% { transform: translate(0, 0); }
}
Mã HTML
<div class='TruongDevsLoader-overlay' id='TruongDevsLoader'>
<div class='TruongDevsLoader-box'>
<div class='TruongDevsLoader-icon'>{ <span>▲</span> <span>■</span> <span>●</span> }</div>
<div class='TruongDevsLoader-text'>Booting System...</div>
<div class='TruongDevsLoader-brand'>© TruongDevs 2025</div>
</div>
</div>
<script>
// TruongDevs Loader Auto-hide Script
(function () {
const loader = document.getElementById('TruongDevsLoader');
if (loader) {
window.addEventListener('load', () => {
setTimeout(() => loader.classList.add('hidden'), 800);
});
}
})();
</script>
Với những bước đơn giản trên, website của bạn đã có ngay hiệu ứng loading Squid Game đẹp mắt rồi!
Cách tùy chỉnh màu sắc và kiểu dáng cho preloader của bạn
Tại sao phải sử dụng màu sắc mặc định khi bạn có thể tùy chỉnh nó theo phong cách của riêng bạn? Bạn có thể thay đổi màu sắc của preloader cho phù hợp với theme của blog, giúp nó trông đồng bộ hơn và tạo dấu ấn riêng biệt.
Ví dụ: Nếu bạn muốn preloader có màu sắc giống với màu chủ đạo trên blog, bạn chỉ cần thay đổi các giá trị trong CSS như sau:
--squid-primary-color: #FF5733; /* Màu đỏ cam thay vì xanh dương */
Bạn cũng có thể thay đổi hình dạng của preloader, từ hình tròn sang hình vuông, tam giác, hay những kiểu dáng sáng tạo khác. Hãy thử chỉnh sửa để tạo ra preloader riêng biệt cho mình nhé!
Lợi ích không ngờ khi sử dụng hiệu ứng loading độc đáo
Nhiều người nghĩ rằng preloader chỉ là một hiệu ứng trang trí, nhưng thực ra nó có tác dụng rất lớn trong việc giữ chân người dùng. Nếu trang web của bạn có hiệu ứng loading đẹp mắt, người dùng sẽ cảm thấy thích thú và ít có khả năng rời đi khi website vẫn đang tải.
Bên cạnh đó, một preloader độc đáo còn giúp tăng khả năng nhận diện thương hiệu, vì người xem sẽ nhớ đến trang web của bạn nhờ vào những chi tiết nhỏ này. Hãy thử áp dụng preloader Squid Game và bạn sẽ thấy ngay sự khác biệt.
Kết luận
Như vậy, việc thêm một hiệu ứng loading độc đáo như TruongDevs Preloader sẽ giúp trang web của bạn không chỉ đẹp mắt mà còn nâng cao trải nghiệm người dùng một cách đáng kể. Không còn phải chịu đựng những màn hình tải đơn điệu nữa, giờ đây bạn có thể tạo ra một dấu ấn riêng biệt cho website của mình với những hiệu ứng bắt mắt, dễ dàng cài đặt và tùy chỉnh theo ý thích.
Với các tính năng như tương thích với mọi chủ đề, hoạt hình mượt mà, chế độ tối tự động, và cài đặt cực kỳ đơn giản, TruongDevs Preloader sẽ là một công cụ tuyệt vời giúp website của bạn trông chuyên nghiệp và hấp dẫn hơn bao giờ hết. Hãy thử ngay và đừng quên chia sẻ kết quả với mình nhé!
Mình luôn nỗ lực cải tiến các công cụ và tính năng trên TruongDevs. Bạn muốn có thêm những tính năng nào trong trình tải trước này? Hay có ý tưởng nào cho một tiện ích tuyệt vời khác không? Hãy chia sẻ ý tưởng của bạn trong phần bình luận bên dưới! Phản hồi của bạn sẽ giúp mình tạo ra những công cụ tốt hơn, phục vụ cho cộng đồng Blogger và giúp tất cả chúng ta phát triển hơn nữa. Cảm ơn bạn đã đồng hành cùng TruongDevs!
