title: In AR.js When Load Model ,Show A Loading Screen
body: <p>When We Load A Big 3D Model Or Big A Video, It Takes Time To Load The Assets(Resources) And Render The Resources,So I Want To Show A Loading Screen Or Loading Gif File or a Loading A-Box - Till The Whole Assets Loading And Rendering Is Done,On The Screen Or On The Pattern.Please Go Through My <a href="https://glitch.com/edit/#!/join/676dab30-266d-438d-944a-43b616d08943" rel="nofollow noreferrer">GLITCH</a> , Its Working But It Will Take 10-15 Sec to load and render.</p>
  
  <p>I tried To Add Asset Loading Manager But It didn't Worked . I Tried All The Ways But It Didn't Worked</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
     &lt;head&gt;
        &lt;title&gt;Hello!&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
        &lt;script type="text/javascript" src="https://aframe.io/releases/0.8.2/aframe.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://unpkg.com/aframe-animation-component@5.1.2/dist/aframe-animation-component.min.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;a-scene vr-mode-ui="enabled: false" artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 90;' arjs='debugUIEnabled: false;detectionMode: mono_and_matrix; matrixCodeType: 3x3;'&gt;
           &lt;a-assets&gt;
              &lt;a-entity src="https://cdn.glitch.com/a5ca03d3-3024-44dc-9256-0b75c4247613%2Fscene.gltf?v=1563255364433" id="model"&gt;&lt;/a-entity&gt;
           &lt;/a-assets&gt;
           &lt;a-marker preset="hiro"&gt;
              &lt;a-entity  gltf-model="#model" material='transparent:true;shader:flat;side:double;metelness:2' scale="0.04 0.04 0.04" &gt;&lt;/a-entity&gt;
           &lt;/a-marker&gt;
           &lt;a-entity camera&gt;&lt;/a-entity&gt;
           &lt;a-entity shadow="cast: true"&gt;&lt;/a-entity&gt;
        &lt;/a-scene&gt;
        &lt;script&gt;
           // Workaround for an AR.js bug (https://github.com/jeromeetienne/AR.js/issues/410)
           const sceneEl = document.querySelector('a-scene');
           sceneEl.addEventListener('loaded', () =&gt; {
             sceneEl.camera = new THREE.PerspectiveCamera();
             scene.add( camera );
           });
        &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>After Showing The <a href="https://upload.wikimedia.org/wikipedia/commons/0/08/Pattern-hiro.png" rel="nofollow noreferrer">HIRO</a> Pattern Its Takes 10-15 Seconds (Depending Upon The Internet Speed) To Load And Render . I Want To Show Some Preloader Or Loading Screen Or Some <a href="https://www.montclair-hostel.com/wp-content/uploads/2017/01/loading5.gif" rel="nofollow noreferrer">Gif Loading Image</a> To Display Till The Object (Assets) Loads Completely And Render And Disappear Once The Rendering And Loading Is Done......</p>
  
  <p>Thanks In Advance</p>