 <template>
  <div class="common-loader loader--style3" title="2">
    <div class="loader-mask"></div>
    <svg
      version="1.1"
      id="loader-1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      width="40"
      height="40"
      viewBox="0 0 60 60"
      style="enable-background:new 0 0 80 80;"
      xml:space="preserve"
    >
      <path
        fill="#000"
        d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
      >
        <animateTransform
          attributeType="xml"
          attributeName="transform"
          type="rotate"
          from="0 25 25"
          to="360 25 25"
          dur="0.6s"
          repeatCount="indefinite"
        />
      </path>
    </svg>
  </div>
</template>

<style lang="less" scoped>
.common-loader {
  .loader-mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000000020;
    background: rgba(0, 0, 0, 0.1);
  }
  svg {
    position: fixed;
    top: 300px;
    left: 172px;
    z-index: 1000000021;
  }
}

svg path,
svg rect {
  fill: #449284;
}
</style>
