<h1 class="title">Loading</h1>
<div class="rainbow-marker-loader"></div>
:root{
  /* animations constants */
  --steps: 10;
  --saturation: 80%;
  --lightness: 60%;
  --hue-offset: 320;
  --duration: 5000ms;

  /* generate some colors */
  --color-01: hsl( calc( 360 / var(--steps) *  1 + var(--hue-offset)), var(--saturation), var(--lightness) );
  --color-02: hsl( calc( 360 / var(--steps) *  2 + var(--hue-offset)), var(--saturation), var(--lightness) );
  --color-03: hsl( calc( 360 / var(--steps) *  3 + var(--hue-offset)), var(--saturation), var(--lightness) );
  --color-04: hsl( calc( 360 / var(--steps) *  4 + var(--hue-offset)), var(--saturation), var(--lightness) );
  --color-05: hsl( calc( 360 / var(--steps) *  5 + var(--hue-offset)), var(--saturation), var(--lightness) );
  --color-06: hsl( calc( 360 / var(--steps) *  6 + var(--hue-offset)), var(--saturation), var(--lightness) );
  --color-07: hsl( calc( 360 / var(--steps) *  7 + var(--hue-offset)), var(--saturation), var(--lightness) );
  --color-08: hsl( calc( 360 / var(--steps) *  8 + var(--hue-offset)), var(--saturation), var(--lightness) );
  --color-09: hsl( calc( 360 / var(--steps) * 9 + var(--hue-offset)), var(--saturation), var(--lightness) );
  --color-10: hsl( calc( 360 / var(--steps) * 10 + var(--hue-offset)), var(--saturation), var(--lightness) );
  --color-11: hsl( calc( 360 / var(--steps) * 11 + var(--hue-offset)), var(--saturation), var(--lightness) );  
  --color-crayon: #202036;

  /* build some backgrounds */
  --bg-01-a: no-repeat left       0% top    / 11%   0% linear-gradient(to right, var(--color-01), var(--color-02));
  --bg-01-b: no-repeat left       0% top    / 11% 100% linear-gradient(to right, var(--color-01), var(--color-02));
  --bg-02-a: no-repeat left   11.11% bottom / 11%   0% linear-gradient(to right, var(--color-02), var(--color-03));
  --bg-02-b: no-repeat left   11.11% bottom / 11% 100% linear-gradient(to right, var(--color-02), var(--color-03));
  --bg-03-a: no-repeat left   22.22% top    / 11%   0% linear-gradient(to right, var(--color-03), var(--color-04));
  --bg-03-b: no-repeat left   22.22% top    / 11% 100% linear-gradient(to right, var(--color-03), var(--color-04));
  --bg-04-a: no-repeat left   33.33% bottom / 11%   0% linear-gradient(to right, var(--color-04), var(--color-05));
  --bg-04-b: no-repeat left   33.33% bottom / 11% 100% linear-gradient(to right, var(--color-04), var(--color-05)); 
  --bg-05-a: no-repeat left   44.44% top    / 11%   0% linear-gradient(to right, var(--color-05), var(--color-06));
  --bg-05-b: no-repeat left   44.44% top    / 11% 100% linear-gradient(to right, var(--color-05), var(--color-06)); 
  --bg-06-a: no-repeat left   55.55% bottom / 11%   0% linear-gradient(to right, var(--color-06), var(--color-07));
  --bg-06-b: no-repeat left   55.55% bottom / 11% 100% linear-gradient(to right, var(--color-06), var(--color-07)); 
  --bg-07-a: no-repeat left   66.66% top    / 11%   0% linear-gradient(to right, var(--color-07), var(--color-08));
  --bg-07-b: no-repeat left   66.66% top    / 11% 100% linear-gradient(to right, var(--color-07), var(--color-08));
  --bg-08-a: no-repeat left   77.77% bottom / 11%   0% linear-gradient(to right, var(--color-08), var(--color-09));
  --bg-08-b: no-repeat left   77.77% bottom / 11% 100% linear-gradient(to right, var(--color-08), var(--color-09));
  --bg-09-a: no-repeat left   88.88% top    / 11%   0% linear-gradient(to right, var(--color-09), var(--color-10));
  --bg-09-b: no-repeat left   88.88% top    / 11% 100% linear-gradient(to right, var(--color-09), var(--color-10));  
  --bg-10-a: no-repeat left   99.99% bottom / 11%   0% linear-gradient(to right, var(--color-10), var(--color-11));
  --bg-10-b: no-repeat left   99.99% bottom / 12% 100% linear-gradient(to right, var(--color-10), var(--color-11));   
}

.rainbow-marker-loader {
  height:4rem;
  width:20rem;
  max-width:100%;
  border:.5rem solid var(--color-crayon);
  border-radius:.5rem;
  animation: infinite alternate rainbow-fill var(--duration) ease-in-out;
  box-sizing:border-box;
  position:relative;
  margin:1rem;
  background:
    var(--bg-01-a),
    var(--bg-02-a),
    var(--bg-03-a),
    var(--bg-04-a),
    var(--bg-05-a),
    var(--bg-06-a),
    var(--bg-07-a),
    var(--bg-08-a),
    var(--bg-09-a),
    var(--bg-10-a); 
}

.rainbow-marker-loader::after{
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transform-origin:left center;
  border-radius:.5rem;
  box-sizing:border-box;  
  margin-top:-7.5%;
  margin-left:-2.5%;
  animation: infinite alternate move-marker var(--duration) ease-in-out;    
  background:
    no-repeat left   0% top    / 3rem  50% linear-gradient(to bottom right, transparent, transparent 40%, var(--color-crayon) 40%),
    no-repeat left   0% bottom / 3rem  50% linear-gradient(to top right, transparent, transparent 40%, var(--color-crayon) 40%),
    no-repeat left 3rem bottom / 100% 100% linear-gradient( var(--color-crayon), var(--color-crayon))
}

@keyframes move-marker{
  10%{
    transform: translate(5%, 100%) rotate(2.5deg);
  }
  20%{
    transform: translate(20%, 0) rotate(-5deg);
  }
  30%{
    transform: translate(30%, 100%) rotate(2.5deg);
  }  
  40%{
    transform: translate(40%, 0) rotate(-5deg);
  } 
  50%{
    transform: translate(50%, 100%) rotate(2.5deg);
  }   
  60%{
    transform: translate(60%, 0) rotate(-5deg);
  }   
  70%{
    transform: translate(70%, 100%) rotate(2.5deg);
  }  
  80%{
    transform: translate(80%, 0) rotate(-5deg);
  }  
  90%{
    transform: translate(90%, 100%) rotate(2.5deg);
  }  
  100%{
    transform: translate(100%, 0) rotate(-5deg);
  }   
}

@keyframes rainbow-fill{
  0%{
    background:
      var(--bg-01-a),
      var(--bg-02-a),
      var(--bg-03-a),
      var(--bg-04-a),
      var(--bg-05-a),
      var(--bg-06-a),
      var(--bg-07-a),
      var(--bg-08-a),
      var(--bg-09-a),
      var(--bg-10-a);
  }
  10%{
    background:
      var(--bg-01-b),
      var(--bg-02-a),
      var(--bg-03-a),
      var(--bg-04-a),
      var(--bg-05-a),
      var(--bg-06-a),
      var(--bg-07-a),
      var(--bg-08-a),  
      var(--bg-09-a), 
      var(--bg-10-a);      
  }
  20%{
    background:
      var(--bg-01-b),
      var(--bg-02-b),
      var(--bg-03-a),   
      var(--bg-04-a),
      var(--bg-05-a),
      var(--bg-06-a),
      var(--bg-07-a),  
      var(--bg-08-a),
      var(--bg-09-a),
      var(--bg-10-a);      
  }
  30%{
    background:
      var(--bg-01-b),
      var(--bg-02-b),
      var(--bg-03-b),
      var(--bg-04-a),
      var(--bg-05-a),
      var(--bg-06-a),
      var(--bg-07-a),  
      var(--bg-08-a),
      var(--bg-09-a),
      var(--bg-10-a);      
  }
  40%{
    background:
      var(--bg-01-b),
      var(--bg-02-b),
      var(--bg-03-b),
      var(--bg-04-b), 
      var(--bg-05-a), 
      var(--bg-06-a), 
      var(--bg-07-a),  
      var(--bg-08-a),
      var(--bg-09-a),
      var(--bg-10-a);      
  }
  50%{
    background:
      var(--bg-01-b),
      var(--bg-02-b),
      var(--bg-03-b),
      var(--bg-04-b), 
      var(--bg-05-b), 
      var(--bg-06-a),
      var(--bg-07-a),   
      var(--bg-08-a),
      var(--bg-09-a),
      var(--bg-10-a);      
  }
  60%{
    background:
      var(--bg-01-b),
      var(--bg-02-b),
      var(--bg-03-b),
      var(--bg-04-b), 
      var(--bg-05-b), 
      var(--bg-06-b), 
      var(--bg-07-a),   
      var(--bg-08-a),
      var(--bg-09-a),
      var(--bg-10-a);      
  }    
  70%{
    background:
      var(--bg-01-b),
      var(--bg-02-b),
      var(--bg-03-b),
      var(--bg-04-b), 
      var(--bg-05-b), 
      var(--bg-06-b), 
      var(--bg-07-b),  
      var(--bg-08-a),
      var(--bg-09-a),
      var(--bg-10-a);      
  }  
  80%{
    background:
      var(--bg-01-b),
      var(--bg-02-b),
      var(--bg-03-b),
      var(--bg-04-b), 
      var(--bg-05-b), 
      var(--bg-06-b), 
      var(--bg-07-b),  
      var(--bg-08-b),
      var(--bg-09-a),
      var(--bg-10-a);      
  }
  90%{
    background:
      var(--bg-01-b),
      var(--bg-02-b),
      var(--bg-03-b),
      var(--bg-04-b), 
      var(--bg-05-b), 
      var(--bg-06-b), 
      var(--bg-07-b),  
      var(--bg-08-b),
      var(--bg-09-b), 
      var(--bg-10-a);     
  }   
  100%{
    background:
      var(--bg-01-b),
      var(--bg-02-b),
      var(--bg-03-b),
      var(--bg-04-b), 
      var(--bg-05-b), 
      var(--bg-06-b), 
      var(--bg-07-b),  
      var(--bg-08-b),
      var(--bg-09-b), 
      var(--bg-10-b);     
  }
}


/* for demo */
body{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:1rem 1rem 2rem 1rem;
  box-sizing:border-box;
  overflow:hidden;
}

.title{
  color:var(--color-crayon);
  font-size:1.5rem;
  font-family: 'M PLUS Rounded 1c', sans-serif; 
  text-transform:uppercase;
  letter-spacing:1px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/dariocorsi/pen/de198bdaf7bb0bf03ac880d82fdfa5d5.js?editors=0010