Анимация изображения (SandTimer) - HTML, CSS, Javascript

Question

Я создал экран загрузки с использованием HTML и CSS. Но мне нужно сделать анимацию Sandtimer (вращение Sandtimer и песок льется сверху). Любая помощь будет высоко ценится в анимации. Мой код указан ниже.

<style type="text/css">

.load-modal-box{
    border-radius: 8px;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
    width: 710px;
    height: 530px;
    background: -webkit-linear-gradient(top, #f1f1f1 65%, #f1f1f1 65%);
    z-index: 3;
    position: fixed;
    top: 76px;
    left: 46px;
    overflow: hidden;
}
 .load{
    height: 500%;
    width: 500%;
    position: absolute;
    z-index: 11;
    top: -40px;
}
</style>
  <div class = "load" id="loadmodalbox">
    <div class="load-modal-box">
        <img src="./images/sandtimerpngg.png" style="position: absolute;
    left: 300px;
    width: 80px;
    height: 100px;
    top: 170px">
    <h2 style="text-align: center;color: #6f7475;padding-top: 270px;">Loading.. Please wait..</h2>
    </div>
   </div>

Answer 1

Как разработчик, я ленивый! Travis Bernard я быстро нашел пример того, чего вы пытаетесь достичь в CodePen, использующем только HTML и CSS.

Ссылка для дополнительных примеров: https://codepen.io/tag/hourglass/

*, *:before, *:after {
  box-sizing: border-box;
}

.hourglass {
  font-size: 2em;
}


div {
  width: 3.5em;
  height: 5em;
  border-style: solid;
  border-width: 2.5em 1.2em;
  border-color: blue transparent;
  border-radius: 10%;
  position: relative;
  animation: spin 5s linear infinite;
}
  
div:before {
  content: "";
  width: 2.5em;
  height: 4.5em;
  border-style: solid;
  border-width: 2.25em 1.1em;
  border-color: white transparent transparent;
  border-radius: 10%;
  position: absolute;
  top: -2.25em;
  left: -.7em;
  animation: slideOut 5s linear infinite;
}

div:after {
  content: "";
  width: 2.5em;
  height: 4.5em;
  border-style: solid;
  border-width: 0em 1.1em;
  border-color: transparent transparent white;
  border-radius: 10%;
  position: absolute;
  top: -2.25em;
  left: -.7em;
  animation: slideIn 5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotation(0deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes slideOut {
  0% {
    top: -2.25em;
    width: 2.5;
    border-width: 2.25em 1.1em;
  }
  90% {
    top: 0em;
    width: 0;
    border-width: 0em 0em;
    left: .55em;
  }
  100% {
    top: 0em;
    width: 0;
    border-width: 0em 0em;
    left: .55em;
  }
}
@keyframes slideIn {
  0% {
    border-width: 0em 1.1em;
  }
  90% {
    border-width: 2.25em 1.1em;
  }
  100% {
    border-width: 2.25em 1.1em;
  }
}

<div class="hourglass"></div>