Tạo hiệu ứng chờ tải trang (SVG Loading Animation / Preloader) trong Blogger

Hiệu ứng chờ tải trang không có gì là mới mẻ cả và hiện nay rất nhiều trang web sử dụng. Mỗi trang đều sử dụng cho mục đích khác nhau mà một trong những nguyên do cần đưa hiệu ứng này vào là che đi phần khuyết điểm trong thời gian tải trang, bất kể thời gian tải bao lâu nếu thấy trang có hiện tượng bị giựt, bố cục hiển thị không đồng bộ ví dụ phần sau tải trước phần trước…

Trình tải trước là gì?

Trình tải trước là một hình ảnh tĩnh hoặc trình tải css động được hiển thị trên màn hình trong khi trang web đang tải ở chế độ nền.

Hoạt ảnh của trình tải trước kết thúc khi hết thời gian trong tập lệnh của bạn và trang được tải đầy đủ và sẵn sàng hiển thị, đồng thời trang của bạn được hiển thị cho khách truy cập.

Hiệu ứng tải trước là gì?

Hoạt động của Hiệu ứng Tải trước trong Blogger là các chuyển đổi sẽ tự động xuất hiện khi tải các trang trên blog và sẽ biến mất sau khi trang được tải đầy đủ.

Hiệu ứng Preloading mà mình sẽ chia sẻ sẽ không ảnh hưởng đến tốc độ của blog vì nó rất nhẹ thuần CSS và SVG không có hình ảnh.

Ưu điểm của Preloader?

Để cho mọi người truy cập biết rằng trang web của bạn không bị sập mà chỉ đang tải.
Cung cấp cho người truy cập của bạn nội dung gì đó để xem trong khi họ đợi trang web tải.
Để cung cấp sự công nhận và tạo ấn tượng cho thương hiệu của bạn (một số trình tải trước cho phép bạn tùy chỉnh nó để thương hiệu của bạn ở vị trí trung tâm ngay cả trước khi người dùng nhìn thấy nội dung của bạn).

Mã CSS cho một số hoạt ảnh chờ tải trang cho BLOGGER

<style> .lds-dual-ring {width: auto;height: auto;}.lds-dual-ring:after { margin:50%; content: " "; display: block;  width: 40px;  height: 40px;  border-radius: 50%;  border: 6px solid #ffa500;  border-color: #ffa500 transparent #ffa500 transparent;  animation: lds-dual-ring 1.2s linear infinite;}@keyframes lds-dual-ring {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }      }<style/>

<div class="lds-dual-ring"></div>

<style> .lds-circle{display:inline-block;transform:translateZ(1px)} .lds-circle> div{display:inline-block;width:64px;height:64px;margin:8px;border-radius:50%;background:#ffa500;animation:lds-circle 2.4s cubic-bezier(0,0.2,0.8,1) infinite}@keyframes lds-circle{0%,100%{animation-timing-function:cubic-bezier(0.5,0,1,0.5)} 0%{transform:rotateY(0deg)} 50%{transform:rotateY(1800deg);animation-timing-function:cubic-bezier(0,0.5,0.5,1)} 100%{transform:rotateY(3600deg)} }<style/>

<div class="lds-circle"><div></div></div>

<style> .lds-ring {  position: relative;  width: 20px; height: 20px;}.lds-ring div {  box-sizing: border-box;  display: block;  position: absolute;  width: 20px;  height: 20px;  margin: 8px;  border: 8px solid #ffa500;  border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #ffa500 transparent transparent transparent;}.lds-ring div:nth-child(1) {  animation-delay: -0.45s;}.lds-ring div:nth-child(2) {  animation-delay: -0.3s;}.lds-ring div:nth-child(3) {  animation-delay: -0.15s;} @keyframes lds-ring { 0% {    transform: rotate(0deg); } 100% { transform: rotate(360deg); }}<style/>

<div class="lds-ring"><div></div><div></div><div></div></div>

<style> .lds-hourglass{display:inline-block;position:relative;width:30px;height:30px}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:10px;box-sizing:border-box;border:16px solid orange;border-color:orange transparent;animation:lds-hourglass 1.2s infinite}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)} 50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)} 100%{transform:rotate(1800deg)} }<style/>

<div class="lds-hourglass"></div>

<style> .lds-heart{display:inline-block;width:10px;height:10px;transform:rotate(45deg);transform-origin:20px 20px}.lds-heart div{top:12px;left:12px;width:32px;height:32px;background:#ffa500;animation:lds-heart 1.2s infinite cubic-bezier(0.215,0.61,0.355,1)}.lds-heart div:after,.lds-heart div:before{content:" ";position:absolute;display:block;width:32px;height:32px;background:#ffa500}.lds-heart div:before{left:-24px;border-radius:50% 0 0 50%}.lds-heart div:after{top:-24px;border-radius:50% 50% 0 0}@keyframes lds-heart {0%{transform:scale(0.95)}5%{transform:scale(1.1)}39%{transform:scale(0.85)}45%{transform:scale(1)}60%{transform:scale(0.95)}100%{transform:scale(0.9)}}

<div class="lds-heart"><div></div></div>

<style> .lds-facebook { display: inline-block;  position: relative;  width: 30px;  height: 30px;}.lds-facebook div {  display: inline-block;  position: absolute;  left: 8px;  width: 16px;  background: #ffa500;  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;}.lds-facebook div:nth-child(1) {  left: 8px; animation-delay: -0.24s;}.lds-facebook div:nth-child(2) {  left: 32px;  animation-delay: -0.12s;}.lds-facebook div:nth-child(3) {  left: 56px;  animation-delay: 0;}@keyframes lds-facebook {  0% {   top: 8px;    height: 20px;  } 50%, 100% {    top: 24px;    height: 20px;  }}<style/>

<div class="lds-facebook"><div></div><div></div><div></div></div>

<style> .lds-ellipsis {  display: inline-block;  position: relative;  width: 30px;  height: 30px;}.lds-ellipsis div {  position: absolute;  top: 33px; width: 13px; height: 13px;  border-radius: 50%;  background: #ffa500;  animation-timing-function: cubic-bezier(0, 1, 1, 0);}.lds-ellipsis div:nth-child(1) {  left: 8px;  animation: lds-ellipsis1 0.6s infinite;}.lds-ellipsis div:nth-child(2) {  left: 8px;  animation: lds-ellipsis2 0.6s infinite;}.lds-ellipsis div:nth-child(3) {  left: 32px;  animation: lds-ellipsis2 0.6s infinite;}.lds-ellipsis div:nth-child(4) {  left: 56px;  animation: lds-ellipsis3 0.6s infinite;}@keyframes lds-ellipsis1 {  0% {    transform: scale(0);  }  100% {   transform: scale(1);  }}@keyframes lds-ellipsis3 {  0% {    transform: scale(1);  }  100% {    transform: scale(0);  }}@keyframes lds-ellipsis2 {  0% {    transform: translate(0, 0);  }  100% {    transform: translate(24px, 0);  }}<style/>

<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>

<style> .lds-grid {  display: inline-block;  position: relative;  width: 30px;  height: 30px;}.lds-grid div {  position: absolute;  width: 16px;  height: 16px;  border-radius: 50%;  background: #ffa500;  animation: lds-grid 1.2s linearinfinite;}.lds-grid div:nth-child(1) {  top: 8px;  left: 8px;  animation-delay: 0s;}.lds-grid div:nth-child(2) {  top: 8px;left: 32px;  animation-delay: -0.4s;}.lds-grid div:nth-child(3) {  top: 8px;  left: 56px; animation-delay: -0.8s;}.lds-grid div:nth-child(4) {  top: 32px;  left: 8px; animation-delay: -0.4s;}.lds-grid div:nth-child(5) { top: 32px;  left: 32px;  animation-delay: -0.8s;}.lds-grid div:nth-child(6) {  top: 32px;  left: 56px; animation-delay: -1.2s;}.lds-grid div:nth-child(7) {  top: 56px; left: 8px;  animation-delay: -0.8s;}.lds-grid div:nth-child(8) { top: 56px;  left: 32px;  animation-delay: -1.2s;}.lds-grid div:nth-child(9) {  top: 56px;  left: 56px;  animation-delay: -1.6s;}@keyframes lds-grid {  0%, 100% {    opacity: 1;  }  50% {    opacity: 0.5;  }}<style/>

<div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<style> .lds-spinner{color:official;display:inline-block;position:relative;width:30px;height:30px}.lds-spinner div{transform-origin:40px 40px;animation:lds-spinner 1.2s linear infinite}.lds-spinner div:after{content:" ";display:block;position:absolute;top:3px;left:37px;width:6px;height:18px;border-radius:20%;background:#ffa500}.lds-spinner div:nth-child(1){transform:rotate(0deg);animation-delay:-1.1s}.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-0.9s}.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-0.8s}.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-0.7s}.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-0.6s}.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-0.5s}.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-0.4s}.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-0.3s}.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-0.2s}.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-0.1s}.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}@keyframes lds-spinner{0%{opacity:1}100%{opacity:0}}<style/>

<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<style> .lds-ripple{display:inline-block;position:relative;width:30px;height:30px}.lds-ripple div{position:absolute;border:4px solid #ffa500;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0,0.2,0.8,1) infinite}.lds-ripple div:nth-child(2){animation-delay:-0.5s}@keyframes lds-ripple{0%{top:36px;left:36px;width:0;height:0;opacity:1}100%{top:0;left:0;width:72px;height:72px;opacity:0}}<style/>

<div class="lds-ripple"><div></div><div></div></div>

<style> .lds-roller{display:inline-block;position:relative;width:30px;height:30px}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:40px 40px}.lds-roller div:after{content:" ";display:block;position:absolute;width:7px;height:7px;border-radius:50%;background:#ffa500;margin:-4px 0 0 -4px}.lds-roller div:nth-child(1){animation-delay:-0.036s}.lds-roller div:nth-child(1):after{top:63px;left:63px}.lds-roller div:nth-child(2){animation-delay:-0.072s}.lds-roller div:nth-child(2):after{top:68px;left:56px}.lds-roller div:nth-child(3){animation-delay:-0.108s}.lds-roller div:nth-child(3):after{top:71px;left:48px}.lds-roller div:nth-child(4){animation-delay:-0.144s}.lds-roller div:nth-child(4):after{top:72px;left:40px}.lds-roller div:nth-child(5){animation-delay:-0.18s}.lds-roller div:nth-child(5):after{top:71px;left:32px}.lds-roller div:nth-child(6){animation-delay:-0.216s}.lds-roller div:nth-child(6):after{top:68px;left:24px}.lds-roller div:nth-child(7){animation-delay:-0.252s}.lds-roller div:nth-child(7):after{top:63px;left:17px}.lds-roller div:nth-child(8){animation-delay:-0.288s}.lds-roller div:nth-child(8):after{top:56px;left:12px}@keyframes lds-roller{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}<style/>

<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<style> .lds-default{display:inline-block;position:relative;width:30px;height:30px}.lds-default div{position:absolute;width:6px;height:6px;background:#ffa500;border-radius:50%;animation:lds-default 1.2s linear infinite}.lds-default div:nth-child(1){animation-delay:0s;top:37px;left:66px}.lds-default div:nth-child(2){animation-delay:-0.1s;top:22px;left:62px}.lds-default div:nth-child(3){animation-delay:-0.2s;top:11px;left:52px}.lds-default div:nth-child(4){animation-delay:-0.3s;top:7px;left:37px}.lds-default div:nth-child(5){animation-delay:-0.4s;top:11px;left:22px}.lds-default div:nth-child(6){animation-delay:-0.5s;top:22px;left:11px}.lds-default div:nth-child(7){animation-delay:-0.6s;top:37px;left:7px}.lds-default div:nth-child(8){animation-delay:-0.7s;top:52px;left:11px}.lds-default div:nth-child(9){animation-delay:-0.8s;top:62px;left:22px}.lds-default div:nth-child(10){animation-delay:-0.9s;top:66px;left:37px}.lds-default div:nth-child(11){animation-delay:-1s;top:62px;left:52px}.lds-default div:nth-child(12){animation-delay:-1.1s;top:52px;left:62px}@keyframes lds-default{0%,20%,80%,100%{transform:scale(1)}50%{transform:scale(1.5)}}<style/>

<div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

Làm cách nào để thêm trình tải trước vào trang web Blogger?

Hiểu theo cách đơn giản sẽ sử dụng hiệu ứng chờ tải trang làm che đi tất cả phần hiển thị trang web và chờ cho trang tải xong hiệu ứng sẽ tự động ẩn đi.

Đã gọi là hiệu ứng tất nhiên sẽ có 2 cách để tạo nhưng đều chung một nguyên lý: một là dùng file gif để làm hiệu ứng và hai là dùng animation css để làm hiệu ứng. Bài này mình sẽ sử dụng cách hai để trang không phải tải ảnh gif cho nhẹ, cách thực hiện như sau:

Các bước để thêm trình tải trước vào Trang web Blogger

Sao chép mã bên dưới.
Đi tới Blogger.com > Chủ đề > Chỉnh sửa HTML > Tìm kiếm </body> và dán nó lên trên </body>.
Thay đổi kiểu và thời gian tải từ mã bên dưới để tùy chỉnh theo nhu cầu của bạn.
Lưu mẫu và xem kết quả 😌.

<style>.preloader{position:fixed;width:100%;height:100vh;background:#0f0f0f;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all 400ms;z-index:2000}.preloader.hide{opacity:0;pointer-events:none}.preloader .preloader-text{color:#ffa500;text-transform:uppercase;letter-spacing:8px;font-size:15px}.preloader .dots-container{display:flex;margin-bottom:50px;margin-right:20%;text-align:center}.dots-container .lds-spinner{color:official;display:inline-block;position:relative;width:30px;height:30px}.lds-spinner div{transform-origin:40px 40px;animation:lds-spinner 1.2s linear infinite}.lds-spinner div:after{content:" ";display:block;position:absolute;top:3px;left:37px;width:6px;height:18px;border-radius:20%;background:#ffa500}.lds-spinner div:nth-child(1){transform:rotate(0deg);animation-delay:-1.1s}.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-0.9s}.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-0.8s}.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-0.7s}.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-0.6s}.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-0.5s}.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-0.4s}.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-0.3s}.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-0.2s}.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-0.1s}.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}@keyframes lds-spinner{0%{opacity:1}100%{opacity:0}}@keyframes bounce{50%{transform:translateY(16px)}100%{transform:translateY(0)}}</style>
<center>
<div class="preloader">
<div class="dots-container">
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<div class="preloader-text">
Loading...
</div>
</div>
</center>
<script>const preloader=document.querySelector(".preloader");const preloaderDuration=700;const hidePreloader=()=>{setTimeout(()=>{preloader.classList.add("hide");},preloaderDuration);}
window.addEventListener("load",hidePreloader);</script>

Kết luận

Trên đây là bài viết chia sẻ SVG Loading Animation / Preloader trong Blogger sử dụng css và html và hy vọng bạn có thể sử dụng nó một cách dễ dàng mà không gặp bất kỳ vấn đề gì.

Nhưng nếu nó không hoạt động thì vui lòng bình luận bên dưới cho mình biết và mình sẽ trả lời bạn sớm nhất có thể.

Thanks!

Bài viết thuộc www.vozshare.com

Blogger, Code