<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body
  display: flex
  align-items center
  width 100vw
  height: 100vh

svg
  margin: auto
  padding: 10px
  width: 100vmin
  max-width: 500px

.half-circle
  stroke-dasharray: PI*100
  transform-origin: 50% 50%;
  transform: rotate(-90deg)
  stroke-dashoffset: 264
  animation: rotateCircle 2.2s cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite both,
             delayedSnake 2.2s ease-in-out infinite

.hourglass
  stroke-dasharray: 210
  animation: snake 3s linear infinite both

@keyframes rotateCircle
  0% { transform: rotate(-105deg) }
  5% { transform: rotate(-105deg) }
  95% { transform: rotate(105deg) }
  100% { transform: rotate(105deg) }

@keyframes delayedSnake
  0% { stroke-dashoffset: 260 }
  50% { stroke-dashoffset: 0}
  100% { stroke-dashoffset: -260 }

@keyframes snake
  0% { stroke-dashoffset: 0 }
  100% { stroke-dashoffset: 420 }
        </style>
</head>
<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 203 203" enable-background="new 0 0 203 203" xml:space="preserve">
<g>
	<path class="hourglass" fill="none" stroke="#C0E5FA" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M137.5,169.5h-72
		c0-72,63-73,63-126h-54C74.5,96.5,137.5,97.5,137.5,169.5z"/>
	<path class="hourglass" fill="none" stroke="#74C2EE" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M65.5,34.5h72
		c0,71-63,71-63,126h54C128.5,105.5,65.5,105.5,65.5,34.5z"/>
</g>
<g>
	<path class="half-circle" fill="none" stroke="#C0E5FA" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M2.5,101.5
		c0-54.676,44.324-99,99-99c54.676,0,99,44.324,99,99"/>
	<path class="half-circle" fill="none" stroke="#74C2EE" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M200.5,101.5
		c0,54.676-44.324,99-99,99c-54.676,0-99-44.324-99-99"/>
</g>
</svg>
</body>
<script>
    // Wait for the page to finish loading
window.addEventListener('load', function() {

// Get the SVG element
var svgElement = document.querySelector('svg');

// Calculate the center coordinates of the page
var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;

// Calculate the size of the SVG element
var svgWidth = svgElement.getBoundingClientRect().width;
var svgHeight = svgElement.getBoundingClientRect().height;

// Set the position of the SVG element to center it on the page
svgElement.style.position = 'absolute';
svgElement.style.left = centerX - (svgWidth / 2) + 'px';
svgElement.style.top = centerY - (svgHeight / 2) + 'px';

// Hide the SVG element by default
svgElement.style.display = 'none';

// Add a delay to simulate loading
setTimeout(function() {

  // Show the SVG element
  svgElement.style.display = 'block';

  // Remove the SVG element after a delay
  setTimeout(function() {
    svgElement.remove();
  }, 5000);

}, 2000);

});

</script>
</html>