Code Overlay Layers and Loaders for Web Applications

bysemicon -
0

 


style.css




<style>
  @import url('https://fonts.googleapis.com/css2?family=Sofadi+One&family=K2D&family=Prompt&display=swap');
  /********** Main *************/
  body {
    background: url('https://damensolutions.com/wp-content/uploads/2023/10/AdobeStock_403623508-2048x1226.jpeg') no-repeat center center fixed;
    background-size: cover;
  }
  
  /********** Loader *************/
  .loading-state {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(150, 150, 150, 0.75);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #099FFF;
    font-size: 1.75rem;
    font-weight: bold;
    -webkit-text-stroke: 1px #00FFFF;
    text-stroke: 1px #00FFFF;
  }
  #loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #loading-spinner .spinner {
    border-radius: 50%;
    box-sizing: border-box;
    border: 5px solid #fff0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #loading-spinner .inner {
    border-top: 5px solid #0f0;
    border-bottom: 5px solid #0f0;
    width: 70px;
    height: 70px;
    margin: -35px;
    -webkit-animation: inner-spin 3s linear infinite;
    animation: inner-spin 3s linear infinite;
  }
  #loading-spinner .outer {
    border-right: 5px solid #f00;
    border-left: 5px solid #f00;
    width: 90px;
    height: 90px;
    margin: -45px;
    -webkit-animation: outer-spin 3s linear infinite;
    animation: outer-spin 3s linear infinite;
  }
  #loading-spinner .eye {
    width: 50px;
    height: 50px;
    border: none;
    margin: -25px;
    background-color: #fff0;
    background-image: url("https://semicon.github.io/img/logosm.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  @-webkit-keyframes inner-spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  @keyframes inner-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes outer-spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate-(180deg);
    }
  }
  @keyframes outer-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-180deg);
    }
  }
</style>

index.html


<html>
  <head>
    <base target="_top">
    <?!= include("style.css") ?>
  </head>
  <body>
    <!-- loader -->
    <div id="wichyLoader" style="display: none;">
      <div class="loading-state">
        <div id="loading-spinner">
          <div class="spinner outer">
              <div class="spinner inner">
                  <div>
                    
                  </div>
              </div>
          </div>
          <div class="eye"></div>
          <div id="loading-text"><strong>KruChian</strong></div>
        </div>
      </div>
    </div>

    <?!= include("script.js") ?>
  </body>
</html>

code.gs


function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
    .setTitle("Project Kru Chian")
    .setFaviconUrl("https://semicon.github.io/img/logo2small.png")
    .addMetaTag('viewport', 'width=device-width , initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
}

function include(file){
  return HtmlService.createHtmlOutputFromFile(file).getContent()
}

script.js


<script>
  openLoader()
  
// ฟังก์ชั่นเปิดโอเวอร์เลย์
  function openLoader() {
    document.getElementById("wichyLoader").style.display = "block";
  }

// ฟังก์ชั่นปิดโอเวอร์เลย์
  function closeLoader() {
    document.getElementById("wichyLoader").style.display = "none";
  }

</script>

หากเห็นว่ามีประโยชน์โปรดร่วมสนับสนุนเพื่อเป็นกำลังใจในการพัฒนาต่อไป




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