สร้าง Preloader Animation ด้วย HTML และ CSS

bysemicon -
0

 

Demo




Preloader Animation ซึ่งจะทำงานก่อนที่หน้าเว็บหลักจะโหลดเสร็จสมบูรณ์ โดยประกอบด้วยองค์ประกอบหลักคือ วงกลมหมุน (Loader) และ ข้อความ หรือ โลโก้ (Text Loader) ที่ปรากฏตรงกลางหน้าจอในระหว่างที่หน้าเว็บกำลังโหลด


1. สร้างโครงสร้าง HTML

  • แบบโลโก้อยู่ตรงกลาง

<div id="preloader">
   <div id="loader"></div>
   <div id="text_loader">
      <img id="logoLoader" src="https://semicon.github.io/img/logo2.png" alt="img">
   </div>
</div>

  • แบบข้อความอยู่ตรงกลาง

   
<div id="preloader">
   <div id="loader"></div>
   <div id="text_loader">
      KruChian
   </div>
</div>

2. ตกแต่งด้วย CSS


  @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');

  .hidden {
    display: none !important;
  }

  #text_loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #8504fe;
    font-family: "Caveat", serif;
    font-size: 28px;
    font-weight: 700;
    font-style: normal;
  }

  #logoLoader {
    width: 60px;
    height: 60px;
    animation: beat .25s infinite alternate;
  }

 #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(200, 200, 200, 0.75);
    z-index: 10000;
  }

  #loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f00; //#9370DB;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }

  #loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #0f0; //#BA55D3;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
  }

  #loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #00f; //#FF00FF;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
  }

  #logoLoader {
    width: 60px;
    height: 60px;
    animation: beat .25s infinite alternate;
  }

  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

3. ตัวอย่างการใช้งาน

     
<html lang='en' class=''>
<head>
    <meta charset='UTF-8'>
    <title>Preloader Demo</title>
    <meta name="robots" content="noindex">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');

        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff8;
        }

        #text_loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: "Caveat", serif;
            font-size: 28px;
            font-weight: 700;
            font-style: normal;
            color: #04c4fe;
        }

        #logoLoader {
            width: 60px;
            height: 60px;
            animation: beat .25s infinite alternate;
        }


        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #9370DB;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }

        #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #BA55D3;
            -webkit-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite;
        }

        #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FF00FF;
            -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="preloader">
        <div id="loader"></div>
        <div id="text_loader">
             <img id="logoLoader" src="https://semicon.github.io/img/logo2.png" alt="img">
        </div>
    </div>
</body>

</html>

4. การเปิด-ปิด Preloader ด้วยจาวาสคริปต์


  // Start preloader
  function loadingStart() {
    $('#preloader').removeClass('hidden');
  }

  // Stop preloader
  function loadingStop() {
    $('#preloader').addClass('hidden');
  }

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า