Carga_de_introducción.html

<!--    

Carga de introducción - Animación de carga

-->

<main>
    <div align="justify">
    <h1>Hello, World!</h1>
    <p>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Quae beatae sunt laborum id nesciunt deserunt odio, voluptatem nostrum ipsa itaque alias hic et tempora quaerat doloribus aliquid quo ullam error.</p>
    <p>Autem libero vitae sunt odit, beatae consequatur deleniti, ratione. Omnis, qui aperiam cum eos quas corporis sunt necessitatibus maiores molestias facere esse totam ipsa ea accusantium ad. Iste cumque, iure.</p>
    <p>Provident consequuntur itaque dolores ipsa, sunt, voluptates molestiae aliquid exercitationem, ratione vel id magni? Consectetur beatae, autem quas culpa numquam corrupti. Itaque vel quasi iusto excepturi voluptatum, at, dicta quod.</p>
    <p>Earum necessitatibus reprehenderit praesentium enim nemo sapiente voluptas architecto ratione beatae quia suscipit iste vitae illo porro harum iusto quae sint explicabo alias sed facilis magnam eos minus doloribus, iure.</p>
    </div>
</main>
  <div class="progress" aria-hidden="true"></div>

  <style>
    @import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/open-props.min.css";

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: "Google Sans", sans-serif, system-ui;
  overflow: hidden;
  animation: release 0s calc(var(--duration) * 1.75s) forwards;
}

@keyframes release {
  to {
    overflow: auto;
  }
}

:root {
  --duration: 2;
}

@property --progress {
  initial-value: 0;
  inherits: true;
  syntax: "<integer>";
}

main {
  animation: show calc(var(--duration) * 0.5s) calc(var(--duration) * 1.25s)
    both;
  transform-origin: 50% 75%;
}

h1 {
  font-size: calc(var(--font-size-fluid-3) * 1.2);
  font-weight: var(--font-weight-9);
}

.progress {
  height: 25vmin;
  width: 100vw;
  position: fixed;
  bottom: 0;
  background: hsl(10 80% 50%);
  counter-reset: progress var(--progress);
  animation: slide calc(var(--duration) * 1s) ease-in backwards,
    complete calc(var(--duration) * 1s) ease-in forwards,
    drop calc(var(--duration) * 0.5s) calc(var(--duration) * 1.25s) forwards;
}

main {
  display: grid;
  gap: 1rem;
}

@keyframes show {
  0% {
    scale: 0.9;
    opacity: 0;
  }
}

@keyframes drop {
  to {
    translate: 0 120%;
  }
}

@keyframes slide {
  0% {
    translate: -100% 0;
  }
}

@keyframes complete {
  to {
    --progress: 100;
  }
}

.progress:after {
  content: counter(progress) "%";
  position: absolute;
  right: 2rem;
  font-family: sans-serif;
  top: 50%;
  translate: 0 -50%;
  font-size: 14vmin;
  color: var(--surface-1);
  font-weight: bold;
  font-variant: tabular-nums;
  animation: drop calc(var(--duration) * 0.5s) calc(var(--duration) * 1.25s)
    forwards;
}

  </style>
  
  <script>
    const REPLAY = () => {
  const MARKUP = document.body.innerHTML;
  document.body.innerHTML = "";
  requestAnimationFrame(() => {
    document.body.innerHTML = MARKUP;
  });
};

document.body.addEventListener('click', REPLAY);
    </script>