I created a Loading screen using HTML and CSS . But i need to make the sandtimer image animated (Sandtimer rotating and sand pouring down from top). Any help would be much appreciated in animation. My code is given below.

<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>

I created a Loading screen using HTML and CSS . But i need to make the sandtimer image animated (Sandtimer rotating and sand pouring down from top). Any help would be much appreciated in animation. My code is given below.

<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>

• javascript
• css
• html

• "SO is not a code writing service"... We are here to help you develop things, not to develop it for you. As it stands your question is no different than a job offer, ecept that you forgot the remuneration part... Now, you may want to have a look at SVG + SMIL, which would be one of the easiest out-of-the box way to do morphing as your still image seems to imply you want to do. – Kaiido Commented Jan 10, 2019 at 2:05

1 Answer 1

As a developer, I am lazy! I quickly found an example by Travis Bernard of what you are trying to achieve on CodePen that uses only HTML and CSS.

Reference for more examples: 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>