JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="loader-fragment"></div>

CSS

body {
  background: black;
  margin: 0;
  overflow: hidden;
}
div#loader-fragment {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: #b62542;
  transform: scaleX(0) translateX(-100%);
  animation: demo cubic-bezier(0.76, 0.02, 0.07, 0.99) 1s forwards;
  transform-origin: left;
}
@keyframes demo {
  50% { transform: scaleX(1); translateX(0) }
  100% { transform: scaleX(0) translateX(100%); transform-origin: right; }
}