Вертикальный прогресс бар с заполнением в виде снега

Сделайте процесс загрузки приятным. Красивая анимация снега, заполняющая прогресс бар, интереснее, чем пустой белый экран. У него есть небольшие визуальные детали, такие как снеговик и иглу. Красивое дополнение к вашему веб-ресурсу как раз к новогодним праздникам.

HTML

<div class="bar-wrapper">
  <div class="bar">
    <i class="fas fa-snowman"></i>
    <i class="fas fa-igloo"></i>
  </div>
  <span class="bar-progress">0%</span>
</div>


<div class="modal_toggle"></div>
<div class="modal">
  <a href="https://github.com/HollosJ" target="_blank"><i class="fab fa-github"></i> HollosJ</a>
  <a href="https://jameshollos.dev" target="_blank"><i class="fas fa-user-circle"></i> Portfolio</a>
</div>

CSS

.modal_toggle{width:3rem;height:3rem;background-image:url(https://i.imgur.com/IjeAvGT.png);background-size:cover;position:fixed;bottom:1rem;right:1rem;border-radius:.5rem;transition:transform .1s ease}.modal_toggle:hover{cursor:pointer;transform:scale(1.2)}.modal{
font-family: 'Poppins', sans-serif;position:fixed;display:flex;flex-direction:column;align-items:center;bottom:0;left:50%;transform:translate(-50%,100%);background-color:#492e91;padding:1rem;color:#f3f3f3;transition:transform .1s ease;border-radius:.5rem .5rem 0 0; z-index: 5000}.modal.active{transform:translate(-50%,0)}.modal a{text-decoration:none;color:#f3f3f3}.modal a:hover{color:#c7b3ff}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html {
  font-size: 13px;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #75e1ff; 
}

.bar-wrapper {
  background-color: #75e1ff;
  height: 25rem;
  width: 15rem;
  position: relative;
    overflow-x: hidden;
}

.bar {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #FFFAFA;
  z-index: 2;
  border-radius: .5rem;
  transition: height 100ms ease;
}

.fa-snowman, .fa-igloo {
  position: absolute;
  top: -29px;
  color: white;
  font-size: 30px;
}

.fa-snowman {
  left: 50px;
}

.fa-igloo {
  right: 50px;
}

.bar-progress {
  position: absolute;
  font-size: 2rem;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: 800;
  cursor: pointer;
}

.flake {
  position: absolute;
  z-index: 1;
  animation: fall 3s linear forwards;
  color: white;
  font-size: .75rem;
}

@keyframes fall {
  0% {top: 0px}
  100% {top: calc(100% - .75rem)}
}

/*MEDIA QUERIES*/
@media (min-width: 768px){
  html {
    font-size: 14px;
  }
}
@media (min-width: 900px){
  html {
    font-size: 15px;
  }
}
@media (min-width: 1200px){
  html {
    font-size: 16px;
  }
}

@media (min-width: 1500px){
    html {
        font-size: 17px;
    }
}

JS

//MODAL JS
const modal = document.querySelector(".modal");
const modalToggle = document.querySelector(".modal_toggle");
modalToggle.addEventListener("click", ()=>{
  modal.classList.toggle("active")
});

//Main JS
const wrapper = document.querySelector(".bar-wrapper");
const bar = document.querySelector(".bar");
const progress = document.querySelector(".bar-progress");

//Loading percentage
let perc = 0;

const generate = () => {
  //Generating an ID so the flake can be removed later
  let id = "id"+Date.now() //i.e. "id1606322064360"
  
  //Creating flake to be added to DOM
  const flake = document.createElement("i");
  flake.classList.add("flake");
  flake.classList.add("far");
  flake.classList.add("fa-snowflake")
  flake.classList.add(id);
  
  //Random positioning and animation duration
  flake.style.left = Math.random() * 100 + "%";
  flake.style.animationDuration = Math.floor(Math.random()*5) + 1 + "s"
  
  //Adding flake to DOM
  wrapper.appendChild(flake);
  
  //Change progress color to black if snow reaches text
  if(perc > 49){
    progress.style.color = "#75e1ff";
  }
  
  //Update height of bar, and progress status
  if(perc < 100){
    perc++;
    progress.innerText = perc+ "%";
    bar.style.height = perc + "%";
  }  
  
  //Remove flake from DOM after 5 seconds
  setTimeout(function(){
    let flakeToRemove = document.querySelector(`.${id}`)
    flakeToRemove.remove()
  }, 5000)
}

//Run every 2s
setInterval(generate, 200);

//User can click progress bar to reset loading bar
progress.addEventListener("click", ()=>{
  perc = 0;
  progress.style.color = "white";
})