Как сделать чтобы SVG loader работал?

Question

rusgayfer @rusgayfer

Как сделать чтобы SVG loader работал?

Как сделать чтобы вот этот loader висел когда страница только подгружается? А то подгружается всегда

<!DOCTYPE html>
<html class="h">

    <style>
        .h, .h body, .h #root {
            height:100%;
            margin:0;
            padding:0;
            background: #FFF;
        }
        .h #root {
            display:flex;
            justify-content:center;
            align-items:center;
        }

        #loaderxxx3452345 {
            display:none;
        }

        .h #loaderxxx3452345 {
            display:block;
            width: 54px;
            height: 54px;
          animation: animationFrames linear 1s;
          animation-iteration-count: infinite;
          transform-origin: 50% 50%;
          -webkit-animation: animationFrames linear 1s;
          -webkit-animation-iteration-count: infinite;
          -webkit-transform-origin: 50% 50%;
          -moz-animation: animationFrames linear 1s;
          -moz-animation-iteration-count: infinite;
          -moz-transform-origin: 50% 50%;
          -o-animation: animationFrames linear 1s;
          -o-animation-iteration-count: infinite;
          -o-transform-origin: 50% 50%;
          -ms-animation: animationFrames linear 1s;
          -ms-animation-iteration-count: infinite;
          -ms-transform-origin: 50% 50%;
        }

        @keyframes animationFrames{
          0% {
            transform:  rotate(0deg) ;
          }
          50% {
            transform:  rotate(180deg) ;
          }
          100% {
            transform:  rotate(360deg) ;
          }
        }

        @-moz-keyframes animationFrames{
          0% {
            -moz-transform:  rotate(0deg) ;
          }
          50% {
            -moz-transform:  rotate(180deg) ;
          }
          100% {
            -moz-transform:  rotate(360deg) ;
          }
        }

        @-webkit-keyframes animationFrames {
          0% {
            -webkit-transform:  rotate(0deg) ;
          }
          50% {
            -webkit-transform:  rotate(180deg) ;
          }
          100% {
            -webkit-transform:  rotate(360deg) ;
          }
        }

        @-o-keyframes animationFrames {
          0% {
            -o-transform:  rotate(0deg) ;
          }
          50% {
            -o-transform:  rotate(180deg) ;
          }
          100% {
            -o-transform:  rotate(360deg) ;
          }
        }

        @-ms-keyframes animationFrames {
          0% {
            -ms-transform:  rotate(0deg) ;
          }
          50% {
            -ms-transform:  rotate(180deg) ;
          }
          100% {
            -ms-transform:  rotate(360deg) ;
          }
        }
    </style>


  <body>
    <div id="root">
    <div id="loaderxxx3452345">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g><g transform="translate(3.000000, 0.000000)"><circle stroke="#ECEEF6" stroke-width="6" cx="24" cy="27" r="24"></circle><circle fill="#7F96B5" cx="24" cy="3" r="3"></circle><circle fill="#7F96B5" cx="44.7999992" cy="15" r="3"></circle><path d="M47.0944984,13.0050805 C42.3597415,5.20847873 33.7881234,0 24,0 L24,6 C31.6423836,6 38.3312747,10.0823869 42.0049167,16.1854041 L47.0944984,13.0050805 Z" id="Combined-Shape" fill="#7F96B5"></path></g></g></g></svg>
</div>
    </div>

</html>