loader.css

:root{
    --color-bg: #AD8FFF;
    --animation-duration: 2000ms;  
    --animation-stagger: 80ms;
    --hue: 360;
    --delay: 0;
    --hex: #F46A6C;
    --size: 6vw;
  }
  
  *{
    box-sizing:border-box;
  }
  
  body{
    background: var(--color-bg);
    padding:1rem;
    height:100vh;
    overflow:hidden;  
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  .loader{
    display:flex;
    align-content:center;
    justify-content:center;  
    /* max-width:50vw; */
    width: 100dvw;
    height: 100dvh;
    background-color: aquamarine;
    z-index: 10;
    padding: 15vh 0;
    .text{
        
        z-index: 13;
        position: absolute;
        bottom: 10vh;
        font-family: sutonnyOMJban, "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
        color: cadetblue;
        
    }
  }
  
  
  /* fun (to me) fact: there was a promotional mr freeze pop for batman & robin in 1997 [https://assets.codepen.io/233661/mr-freeze-promotion-box.jpg] */
  .mr-freeze{
    margin:0 2.5%;
    position:relative;
    width: var(--size);
    max-height:50vh;
    aspect-ratio: 1 / 8;
    animation: infinite syrup-displacement var(--animation-duration) ease;
    animation-delay: var(--delay);  
    transform-origin:bottom center;  
    z-index:3;
    border:1px solid rgba(255,255,255,.5) ;
    border-width: 0 2px;
  
    /* make the pop liquid with a background gradient */
    background: 
      no-repeat bottom 1rem center / 100% 30%
      linear-gradient(
        hsla( var(--hue), 100%, 50%, 50%),
        hsla( var(--hue), 100%, 60%, 50%)      
      );  
  }
  
  /* vars for each pop */
  .mr-freeze:nth-child(1){
    --hue:360;
    --hex: #F46A6C;
    --delay: calc( var(--animation-stagger) * 1);
  }
  
  .mr-freeze:nth-child(2){
    --hue:38;
    --hex: #FBAD21;
    --delay: calc( var(--animation-stagger) * 2);
  }
  
  .mr-freeze:nth-child(3){
    --hue:48;
    --hex: #F7D445;
    --delay: calc( var(--animation-stagger) * 3);
  }
  
  .mr-freeze:nth-child(4){
    --hue:84;
    --hex: #9BCC50;
    --delay: calc( var(--animation-stagger) * 4);
  }
  
  .mr-freeze:nth-child(5){
    --hue:194;
    --hex:#3AB9DE;
    --delay: calc( var(--animation-stagger) * 5);
  }
  
  .mr-freeze:nth-child(6){
    --hue:290;
    --hex:#AC51C0;
    --delay: calc( var(--animation-stagger) * 6);
  }
  
  /* ice pop pseduo element */
  .mr-freeze:before{
    --inset: 10%;
    content:'';
    display:block;
    position:absolute;
    top: var(--inset);
    right: var(--inset);
    bottom: 1.5rem;
    left: var(--inset);
    border: 2px solid var(--hex);
    background: var(--hex);
    border-radius: 20% / 2%; 
    pointer-events:none;
    opacity:.9;
    animation: infinite pop-da-pop var(--animation-duration) ease;
    animation-delay: var(--delay);
    box-shadow:
      inset  .25rem  .25rem .5rem hsla(40, 100%, 50%, 0.3), 
      inset -.25rem -.25rem .5rem hsla(200, 100%, 50%, 0.15);
  }
  
  /* sleeve pseudo element*/
  .mr-freeze:after{
    content:'';
    display:block;
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: 
      no-repeat top center / 100% calc(100% - 1rem) 
      linear-gradient( 
        to right,
        rgba(255,255,255,.3) ,       
        rgba(255,255,255,.1) 30%, 
        rgba(255,255,255,.4) 30%,
        rgba(255,255,255,.0)       
      ),    
      no-repeat bottom 1rem center / 100% 2px 
      linear-gradient( 
        to bottom,
        rgba(255,255,255,.5), 
        rgba(255,255,255,.5)
      ),     
      no-repeat bottom center / 100% 1rem 
      linear-gradient( 
        to bottom,
        rgba(255,255,255,.6), 
        rgba(255,255,255,.4)
      );    
    clip-path:
      polygon(
        0 0,
        100% 0,
        100% 100%,      
        87.5% 99%,
        75.0% 100%,
        62.5% 99%,
        50.0% 100%,
        37.5% 99%,
        25.0% 100%,
        12.5% 99%,
        0 100%
      );
  }
  
  /* keyframes are all magic numbers tweaked by eye */
  @keyframes pop-da-pop{
    0%, 5%, 95%, 100%{
      transform: translateY(0);
    }
    40%, 60%{
      transform: translateY(-50%);
    }  
    50%{
      transform: translateY(-48%);
    } 
  }
  
  @keyframes syrup-displacement{
    0%, 100%{
      background-size: 100% 30%;
    }   
    15%, 85%{
      background-size: 100% 32%;
    }    
    30%, 70%{
      background-size: 100% 18%;
    }
    50%{
      background-size: 100% 16%;
    }  
  }