Loading Cursor in A-Frame

index.html

<!-- CURSOR ENTITY -->
<a-entity position="0 1.8 5">
  <a-entity
    id="camera"
    camera
    look-controls
    rotation="0 0 0"
    wasd-controls
  >
    <!-- MAIN CURSOR -->
    <a-entity
      cursor="fuse: true; maxDistance: 500; timeout: 3000;"
      id="cursor-main"
      position="0 0 -2"
      geometry="primitive: ring; radiusOuter: 0.06; radiusInner: 0.03; thetaLength: 360; thetaStart: 90;"
      material="color: #439DC2;"
    >
      <a-animation begin="cursor-fusing" attribute="geometry.thetaLength" fill="forwards" from="360" to="0" easing="ease-in"></a-animation>
      <a-animation begin="mouseleave" attribute="geometry.thetaLength" fill="backwards" from="0" to="360" dur="0"></a-animation>
    </a-entity>
    <a-entity
      id="cursor-loader"
      position="0 0 -2.0001"
      geometry="primitive: ring; radiusOuter: 0.06; radiusInner: 0.03;"
      material="color: #2ADD2A;"
    >
    </a-entity>
  </a-entity>
</a-entity>