.hourglass,
.hourglass:before,
.hourglass:after,
.hourglass2,
.hourglass2:before,
.hourglass2:after {
  box-sizing: border-box;
}

.small {
  font-size: .3em;
}

.hourglass {
  width: 3.5em;
  height: 5em;
  border-style: solid;
  border-width: 2.5em 1.2em;
  border-color: #009EF5 transparent;
  border-radius: 10%;
  position: relative;
  animation: spin 5s linear infinite;
}

.hourglass2 {
  width: 3.5em;
  height: 5em;
  border-style: solid;
  border-width: 2.5em 1.2em;
  border-color: red transparent;
  border-radius: 10%;
  position: relative;
  animation: spin 5s linear infinite;
}
  
.hourglass: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: -.6em;
  animation: slideOut 5s linear infinite;
}

.hourglass: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: -.6em;
  animation: slideIn 5s linear infinite;
}

.hourglass2: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: -.6em;
  animation: slideOut 5s linear infinite;
}

.hourglass2: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: -.6em;
  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;
  }
}