open-vault/ui/app/templates/svg/vault-loading.hbs

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1" id="vault-loading" role="alert" aria-label="Loading">
  <style>
    #vault-loading polygon {
      animation: vault-loading-animation 1.3s infinite ease-in-out;
      transform-origin: 50% 50%;
      fill: #DCE2E9;
    }

    #vault-loading .vault-loading-order-1 {
      animation-delay: .1s;
    }

    #vault-loading .vault-loading-order-2 {
      animation-delay: .2s;
    }

    #vault-loading .vault-loading-order-3 {
      animation-delay: .3s;
    }

    #vault-loading .vault-loading-order-4 {
      animation-delay: .4s;
    }

    #vault-loading-static {
      display: none;
      font-size: 9px;
    }

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      #vault-loading-animated {
        display: none;
      }

      #vault-loading-static {
        display: block;
      }
    }

    @keyframes vault-loading-animation {
      0%,
      70%,
      100% {
        transform: scale3D(1, 1, 1);
      }

      35% {
        transform: scale3D(0, 0, 1);
      }
    }
  </style>
  <g id="vault-loading-animated">
    <g id="vault-loading-y1">
      <polygon class="vault-loading-order-4" points="0,0 5,10 10,0" style="transform-origin: 5px 5px" />
      <polygon class="vault-loading-order-2" points="5,10 10,0 15,10" style="transform-origin: 10px 5px" />
      <polygon class="vault-loading-order-3" points="10,0 15,10 20,0" xstyle="transform-origin: 15px 5px" />
      <polygon class="vault-loading-order-1" points="15,10 20,0 25,10" style="transform-origin: 20px 5px" />
      <polygon class="vault-loading-order-3" points="20,0 25,10 30,0" style="transform-origin: 25px 5px" />
      <polygon class="vault-loading-order-2" points="25,10 30,0 35,10" style="transform-origin: 30px 5px" />
      <polygon class="vault-loading-order-4" points="30,0 35,10 40,0" style="transform-origin: 35px 5px" />
    </g>
    <g id="vault-loading-y2">
      <polygon class="vault-loading-order-3" points="5,10 10,20 15,10" style="transform-origin: 10px 15px" />
      <polygon class="vault-loading-order-1" points="10,20 15,10 20,20" style="transform-origin: 15px 15px" />
      <polygon class="vault-loading-order-2" points="15,10 20,20 25,10" style="transform-origin: 20px 15px" />
      <polygon class="vault-loading-order-1" points="20,20 25,10 30,20" style="transform-origin: 25px 15px" />
      <polygon class="vault-loading-order-3" points="25,10 30,20 35,10" style="transform-origin: 30px 15px" />
    </g>
    <g id="vault-loading-y3">
      <polygon class="vault-loading-order-3" points="10,20 15,30 20,20" style="transform-origin: 15px 25px" />
      <polygon class="vault-loading-order-2" points="15,30 20,20 25,30" style="transform-origin: 20px 25px" />
      <polygon class="vault-loading-order-3" points="20,20 25,30 30,20" style="transform-origin: 25px 25px" />
    </g>
    <g id="vault-loading-y4">
      <polygon class="vault-loading-order-4" points="15,30 20,40 25,30" style="transform-origin: 20px 35px" />
    </g>
  </g>

  <text id="vault-loading-static" x="20" y="20" text-anchor="middle">
    Loading...
  </text>
</svg>