The simplest CSS loading sign

<style>
  .loading { 
    background: linear-gradient(to right, green, #FFF) no-repeat;
    animation: loading 2s linear infinite;
  }
  @keyframes loading { 
    0% { background-size: 0%;}
    100% { background-size: 100%;}
  }
</style>
<div class="loading">Loading</div>

<style>
  .loading {
    background: linear-gradient(to right, #FFF, green, green, #FFF) no-repeat;
    background-size: 30% 100%;
    animation: loading 3s linear infinite;
  }
  
  @keyframes loading {
    0% { background-position: 0% 0%;}
    50% { background-position: 100% 0%; }
    100% { background-position: 0% 0%; }
  }
</style>
<div class="loading">Loading</div>

Hope the example code explains everything.

To explain further,

1. The block has a 30% width background.
2. The size of background changes, or the background position changes.

StackBlitz example

Simple, isn’t it?

Happy coding :)

Dec 14, 2023

Allen Kim