[data-state="loading"] body::before,
[data-state="loading"] body::after {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(128, 204, 204, 0.75);
  font-size: x-large;
  visibility: hidden;
}

[data-state="loading"] body::before {
  animation: appear 0.8s linear forwards;
  content: 'Booting';
  transform: translate3d(-50%, -50%, 0);
}

[data-state="loading"] body::after {
  animation: appear 0.8s linear forwards, loading 4s linear 0.8s infinite;
  content: '.';
  transform: translate3d(40px, -50%, 0);
}

/*** ANIMATIONS ***/

@keyframes appear {
  /* Prevent font FOUC */
    0% { visibility: hidden; }
   99% { visibility: hidden; }
  100% { visibility: visible; }
}

@keyframes loading {
    0% { content: '.'; }
   10% { content: '..'; }
   20% { content: '...'; }
   30% { content: '....'; }
   40% { content: '.....'; }
   50% { content: '......'; }
   60% { content: '.......'; }
   70% { content: '........'; }
   80% { content: '.........'; }
   90% { content: '..........'; }
  100% { content: '...........'; }
}