<p>loading</p>
View Compiled
@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@700&display=swap');

p:after {
  display: inline-block;
  width: 44px;
  content: '';
  animation: loading 2s infinite;
}

@keyframes loading {
  0% {
    content: '';
  }
  
  20% {
    content: '';
  }
  
  40% {
    content: '.';
  }
  
  60% {
    content: '..';
  }
  
  80% {
    content: '...';
  }
  
  100% {
    content: '...';
  }
}

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #FAFAFA;
  font: 40px 'Rowdies', cursive;
  background: #424242;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.