Loading screens? #330

tahnmeep · 2021-08-24T04:01:40Z

tahnmeep
Aug 24, 2021

Hi AR friends!
I was wondering if anyone had a method of displaying a loading splash page for marker-based AR.js. Even a simple gif that plays in plain HTML to indicate the page is loading would be way more useful to viewers than the plain white screen. I think the page's title does flash briefly, but that doesn't necessarily indicate anything is happening.
Thanks!

mpopovs · 2021-09-08T06:47:02Z

mpopovs
Sep 8, 2021

Hi,
my solution for marker-based loading screen :
HTML:

<body onload="myFunction()" style="margin:0;">
  <div id="loader"> <object type="image/svg+xml" data="LINK TO MY ANIMATED SVG"></object></div>
  <div style="display:none;" id="myDiv" class="animate-bottom">
  </div>

your marker-based stuff here

  <script>
    var myVar;

    function myFunction() {
      myVar = setTimeout(showPage, 5000);
    }

    function showPage() {
      document.getElementById("loader").style.display = "none";
      document.getElementById("myDiv").style.display = "block";
    }
  </script>

</body>

CSS:

#loader {
  position: absolute;
  top:80%;
left: 50%;
transform: translate(-50%, -50%);
   width: 200px;
   height: 100%;

 }
  #myDiv {
    display: flex;
  justify-content: center;
  align-items: center;
  }

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Loading screens? #330

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Loading screens? #330

tahnmeep Aug 24, 2021

Replies: 1 comment

mpopovs Sep 8, 2021

tahnmeep
Aug 24, 2021

mpopovs
Sep 8, 2021