Hiệu Ứng Loading Cờ Đỏ Sao Vàng

Chào mọi người.

Bài viết này mình sẽ hướng dẫn cho các bạn một thủ thuật khi vào trang website của bạn thì sẽ có hiểu ứng loading cờ đỏ sao vàng tuyệt vời.

Với thủ thuật này hoàn toàn đơn giản. Bạn chỉ cần bỏ đoạn code bên dưới vào sau thẻ <body> là hoàn thành.

Full Code.

.pageLoading{z-index:999;position:fixed;top:-30%;right:-30%;bottom:-30%;left:-30%;display:flex;align-items:center;justify-content:center;background:#fff;transition:all .7s ease}
.pageLoading.done{visibility:hidden;opacity:0}
.pageLoadingC{position:absolute;display:block;background:#db2017;height:100%;width:100%;transition:all .7s ease}
.pageLoading svg{width:0;height:0;visibility:hidden;opacity:0;fill:#ffff00;transition:all .7s ease;z-index:1}
.pageLoading svg.beatAnimation{animation:beat 2.3s linear infinite}
.pageLoading svg.active{visibility:visible;opacity:1;width:60px;height:60px}
.pageLoading.loaded svg.active.starSvg{width:auto;height:15%}
.pageLoading.loaded svg.active.socialistSvg{width:auto;height:12%}
@keyframes beat{0%,50%,100%{transform:scale(1, 1)}30%,80%{transform:scale(0.72, 0.75)}}</style>
<div class='pageLoading'>
  <div class='pageLoadingC'></div>
  <svg class='starSvg active beatAnimation' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'/></svg>
  <svg class='socialistSvg' viewBox='0 0 399.99 364.75' xmlns='http://www.w3.org/2000/svg'><path class='cls-1' d='M395,323.33l-48.7-47c36.83-40,44.46-98.87,26-153-.05-.16-.11-.33-.17-.49q-.81-2.34-1.68-4.67c-.06-.18-.13-.36-.2-.54-1.26-3.35-2.64-6.68-4.11-10-.11-.25-.22-.51-.34-.76-.69-1.53-1.39-3-2.12-4.56l-.15-.32c-.8-1.64-1.62-3.29-2.47-4.92l-.27-.5c-.74-1.42-1.5-2.82-2.28-4.22l-.51-.92q-2.64-4.66-5.54-9.22l-.63-1q-1.2-1.84-2.45-3.68c-.21-.31-.41-.62-.63-.93-1-1.48-2.05-2.94-3.11-4.4l-.37-.49q-1.41-1.91-2.86-3.79l-.89-1.14q-1.39-1.77-2.83-3.52c-.2-.24-.39-.48-.59-.71-1.14-1.38-2.3-2.73-3.49-4.08l-.87-1q-1.41-1.58-2.85-3.12c-.35-.38-.69-.75-1-1.12-1.24-1.32-2.49-2.62-3.78-3.9-2.69-2.7-5.44-5.29-8.22-7.76C292.71,19.37,264.14,6,235.24,1,233.1.62,231,.29,228.81,0a2.09,2.09,0,0,0-.71,0,2,2,0,0,0-.6.25,2.07,2.07,0,0,0-.91,1.58,1.94,1.94,0,0,0,.83,1.72l.2.14.89.63,0,0c1.13.8,2.37,1.69,3.69,2.66h0C243.06,14.94,260,28,274.9,43c26.18,26.17,43.9,55.74,52.76,85l-.32-1c9.18,29.64,9.26,59-.21,84.09l0,.08a102.06,102.06,0,0,1-4.59,10.37c-.06.12-.12.24-.19.36-.48.94-1,1.86-1.49,2.78l-.4.71c-.47.83-1,1.65-1.45,2.47l-.44.72c-.57.91-1.15,1.82-1.75,2.72l-.2.31c-.68,1-1.38,2-2.1,3l-.4.54c-.58.78-1.16,1.55-1.75,2.31-.25.31-.49.62-.74.92-.51.64-1,1.27-1.56,1.9l-.51.6L186.61,122.3c19.91-20.67,36.2-38.68,42-45.17a2.87,2.87,0,0,0,.54-3,2.81,2.81,0,0,0-.7-1,2.73,2.73,0,0,0-.53-.4c-3.52-2.1-8-4.52-12.82-7-16.32-8.51-37.44-18.32-45-21.79a4.56,4.56,0,0,0-1.19-.37,5.69,5.69,0,0,0-.83-.07,4.72,4.72,0,0,0-1.34.19,5,5,0,0,0-.64.25,4.6,4.6,0,0,0-1.17.76C158.13,50.7,151.28,57,144.57,63.37c-1.8,1.72-3.61,3.43-5.39,5.15q-6.31,6.06-12.35,12c-5.16,5.1-10.15,10.11-14.85,14.91l-3.1,3.17c-14.8,15.18-26.59,27.91-32.6,34.49L74.61,135a4.8,4.8,0,0,0-.24,6.16c15.57,19.75,33.73,36.83,40.85,43.29a4.78,4.78,0,0,0,6.29.11c11.29-9.42,23.63-20.85,35.83-32.73L271.4,269.68c-22.8,10.44-47.88,12.08-72.69,6.23l-1.32-.32c-19.15-4.72-38.11-13.89-55.69-26.91l-2.8-2.11c-1.85-1.43-3.69-2.91-5.51-4.42-.91-.76-1.81-1.52-2.71-2.3q-5.42-4.68-10.58-9.84l-1.69-1.7-1-1-.69-.69c-.31-.31-.63-.6-1-.87s-.67-.52-1-.76a12.32,12.32,0,0,0-3.33-1.56A12.08,12.08,0,0,0,109,223q-.6-.06-1.2-.06a12.83,12.83,0,0,0-2.4.22,12.67,12.67,0,0,0-5.55,2.59c-.32.27-.64.55-1,.86L80.35,247.22a47.78,47.78,0,0,0-5.87-3.71c-.74-.39-1.47-.74-2.19-1a20.66,20.66,0,0,0-3.14-1.05c-.38-.1-.76-.17-1.13-.23a12.57,12.57,0,0,0-1.8-.17c-.31,0-.62,0-.92,0a8.62,8.62,0,0,0-5.66,2.61,8.8,8.8,0,0,0-.65.72c-.09.11-.18.24-.26.35l-.29.39c-.11.17-.21.35-.31.52s-.1.17-.14.25-.21.44-.31.67a.61.61,0,0,0,0,.12,5.92,5.92,0,0,0-.27.81h0c-.9,3.22,0,7.05,2.3,11.27a7.44,7.44,0,0,1,.87,3.75v0a7.55,7.55,0,0,1-.47,2.44h0a7.54,7.54,0,0,1-.73,1.48.35.35,0,0,1-.05.08c-.12.19-.25.37-.39.55l-.13.17-.39.44-.16.17c-.18.18-.38.36-.58.53l-49.72,38h0c-.53.47-1,1-1.52,1.47-.16.16-.3.34-.46.51-.31.35-.62.69-.9,1s-.33.43-.49.64-.49.67-.72,1-.3.47-.45.7-.4.67-.59,1-.27.5-.4.75-.33.68-.48,1-.23.51-.33.77-.27.7-.39,1.06-.18.5-.26.76-.21.78-.3,1.17c-.06.22-.13.44-.17.67-.12.58-.22,1.17-.29,1.75,0,.3,0,.59-.07.88s0,.63-.06.94,0,.63,0,.94,0,.57,0,.85.06.64.1,1,.07.53.11.8.12.64.19,1,.13.5.19.75.18.63.29.95.17.46.26.7.25.62.39.93.22.42.33.62a15.48,15.48,0,0,0,2.76,3.82l13.91,13.91c7.35,7.34,20.43,5.86,28.45-3.23l38.21-49.77a7.74,7.74,0,0,1,9.54-2.08c6.16,3.23,11.45,3.79,15,.2,4.6-4.6,2.43-12-3.46-20.37l5.57-4.59a4.15,4.15,0,0,1,5.57.26l.82.83c55.09,55.08,129.06,69.6,189,36.84l51.23,52.95c6.59,6.82,17.77,6.63,24.83-.42l11.17-11.18C401.62,341.11,401.81,329.93,395,323.33Z'/></svg>
</div>
<script>/*<![CDATA[*/ 
  document.querySelector("html").style.overflow = "hidden"
  document.addEventListener("DOMContentLoaded", () => {
    setTimeout(() => {
    var pageLoading = document.querySelector(".pageLoading"),
    svg1 = document.querySelector("svg.starSvg"),
    svg2 = document.querySelector("svg.socialistSvg");
    svg1.classList.remove("beatAnimation"), pageLoading.classList.add("loaded"), setTimeout(() => { 
      svg1.classList.remove("active"), svg2.classList.add("active"), setTimeout(() => {
          pageLoading.classList.add("done"), pageLoading.addEventListener("transitionend", () => {
          	document.querySelector("html").style.overflow = "auto"
          	pageLoading.remove()
          })
        }, 2e3)
      }, 2e3)
    }, 2e3)
  });

Chúc mọi người thành công.

Demo thủ thuật ở bài viết này.

Theo Trick Pro

Tôi Hùng Blog ✅

Hiệu Ứng Loading Cờ Đỏ Sao Vàng

Chào mọi người.

Full Code.

Demo thủ thuật ở bài viết này.

Post a Comment

Post a Comment

@Tags

@Partner