Pause for a few moments prior to initializing Bootstrap and Angular 2

I am currently developing a space/gravity game using Angular 2, and I am looking to incorporate a splash screen before the main menu component is loaded.

I believe that the easiest approach would be to utilize the pre-bootstrapped contents of the index.html file as shown below:

<body>
    <!-- 
        //This is where our bootstrapped content will go. 
        //Because everything will be removed from the DOM after bootstrap,
        //we can consider this pre-bootstrapped index.html as a pseudo "splash screen"
        //(animation credit: http://codepen.io/katehummer/pen/zrygBM)
    -->
    <!--<app-mainmenu>-->
    <svg class="solar-system">
        <circle id="sun" cx="100" cy="100" r="10" stroke="none" fill="#FFE581" />
        <circle id="mercury" cx="100" cy="100" r="3" fill="#fff" stroke="none" />
        <circle id="venus" cx="100" cy="100" r="4" fill="#fff" stroke="none" />
        <circle id="earth" cx="100" cy="100" r="5" fill="#fff" stroke="none" />
        <circle id="mars" cx="100" cy="100" r="5" fill="#fff" stroke="none" />
        <circle id="mercury-orbit" cx="100" cy="100" r="35" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />
        <circle id="venus-orbit" cx="100" cy="100" r="55" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />
        <circle id="earth-orbit" cx="100" cy="100" r="75" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />
        <circle id="mars-orbit" cx="100" cy="100" r="95" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />
    </svg>


    <!-- 
        //WAIT 10 SECONDS MINIMUM - OR WAIT UNTIL USER LOADS IF AFTER 10 SEC
    -->
    <!--</app-mainmenu>-->
</body>

By commenting out <app-mainmenu>, I can effectively test my animation, resembling the one indicated in the comments.

The next challenge is to instruct Angular to wait for 10 seconds before bootstrapping. Although I attempted to introduce a delay in JavaScript at the end, it did not work due to its non-blocking nature.

<script>
    setInterval(tryFinishLoading, 10000);

    function tryFinishLoading() {
        alert("loaded");
    }
</script>

Can anyone advise me on how to achieve the following:

1) Wait for the user to load, if less than 10 seconds, move to step 2.

2) Hold off until 10 seconds have elapsed, if not loaded, repeat the process until successful loading.

Cheers!

htmlcssangulartypescript

Answer №1

This solution will get the job done.

<body>
  <app-mainmenu id="main-menu" style="display:none"></app-mainmenu>
  <svg id="animation">Your Animated Content</svg>

  <script>
    var animation = document.getElementById('animation');
    var menu = document.getElementById('main-menu');
    setTimeout(function() {
      animation.style.display = 'none';
      menu.style.display = 'block';
    }, 10000);
  </script>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Advanced Image Upload using HTML5 and Ajax in the 'background'

As someone who is just learning HTML5 and Ajax, I'm curious to know if it's feasible to use these technologies to create a service that enables users to upload an image in the background while they navigate through different pages on the same sit ...

ajaxhtmlfile-upload

Implementing checkboxes for each API data in JavaScript

I am fairly new to this and I am currently working on a to-do list. I want to include a checkbox next to each item from the API to indicate whether it has been completed or not. <script type="text/javascript"> fetch('http://localhos ...

javascripthtml

use css to align multiple div elements

I am struggling to line up more than five div tags on the same line. Here is my CSS: <style> #yes { float: left; width: 18%; margin:1px; } </style> Example of HTML code: echo '<div id="yes">'.'<b>'.'Job T ...

htmlcss

"Need help solving the issue of generating a random number for a Firebase DB column after adding a new user

Whenever I add a new user using JavaScript, it generates a random number below the Admins column like this. However, I want to adjust this so that it appears as shown in these tables, displaying the username value. If anyone can help me modify the code acc ...

javascripthtmljsonfirebasefirebase-realtime-database

Can you tell me the CSS equivalent of the SASS/SCSS expression "&$"?

Hey there! I've been diving into the world of Material-UI components and stumbled upon this interesting styling snippet: root: (0, _extends3.default)({}, theme.typography.subheading, { height: theme.spacing.unit * 3, boxSizing: 'content- ...

cssreactjssassmaterial-ui

Using JavaScript, add a complex JSON record to a JSON variable by pushing it

I have been attempting to insert a complex JSON data record into a JSON variable using the following code: var marks=[]; var studentData="student1":[{ "term1":[ {"LifeSkills":[{"obtained":"17","grade":"A","gp":"5"}]}, {"Work":[{"obtained":"13"," ...

javascriptjqueryhtmljson

Error message: When working with Protobuf, an uncaught reference error occurs because the 'exports

Currently, I am in the process of configuring protobuf to work with typescript. According to the official Google Documentation, all that is needed is to execute npm install google-protobuf and then to include require('google-protobuf'). Unfortu ...

javascripttypescriptnpmprotocol-buffers

What is the result of using `X ? A : B` in typescript?

type TestAny = any extends 'a' ? 1 : 2 // => 1 | 2 why??? how to interpret? type TestUnknown = unknown extends 'a' ? 1 : 2 // => 2 type TestStringA = 'a' extends 'a' ? 1 : 2 // => 1 type SomeUnion = ' ...

typescript

Navigate to the AngularJS documentation and locate the section on monitoring data changes after a dropdown selection

Just starting out with AngularJS and Stack Overflow, so I hope I am asking this question correctly. I am working on a single-page application with editable text inputs. Two select drop-downs are used to control which data is displayed - one for time perio ...

javascripthtmlangularjsdrop-down-menumodal-dialog

Animating with JavaScript

I have a members button on my website that triggers a dropdown animation when clicked. However, the issue is that the animation occurs every time a page is loaded, even if the button is not clicked. I want the dropdown to only open when the button is click ...

javascriptjqueryhtmlanimation

Tips for changing the background color of a Qtextedit?

After experimenting with HTML, I discovered that using type bgcolor="#ffd814" will change the background color in textedit. But how can I achieve the same result using QAction and QColorDialog? This is the method I tried: void MainWindow::on_actionBackgr ...

htmlqt

Unable to apply inset box-shadow to image

I've added a box-shadow to my image. box-shadow: 0 0 10px RED inset However, the shadow is not showing up on the image. When I use Firebug to change the image path, I can see that the shadow is behind the image. How can I apply the shadow directly ...

htmltwitter-bootstrapcss

Tips for inserting an HTML tag within an object

How can I format a list from an array of objects in React? The 'answer' key consists of the text... Question: blah, Answer: `List title The top advantages of Kin are: 1. 2. 3. 4. ` I want to create so ...

htmlreactjsobjectpchart

Running cy.task after all test suites can be done by adding the task in a

I need some guidance on running cy.task after executing all test suites. I have a file generated at the start of the tests that I would like to remove once they are completed. Regardless of whether any tests passed or failed, I want to trigger cy.task im ...

javascriptnode.jstypescriptautomated-testscypress

After clicking the submit button, how can I eliminate the following: "config.php?username=++psw&Text=psw&submit=send?" and remain on the same page?

Whenever I hit the submit button on my form, PHP completes its task but instead of staying on the page (or simply reloading it), I am redirected to the same URL with '/config.php?username=technologies.%0D%0A++&submit = Send ". Is there a way ...

phphtml

Tips for utilizing a particular style from a font collection?

I am currently in the process of building my first website and I am experimenting with different fonts available on fontsquirrel. However, I am encountering an issue where I am only able to utilize certain fonts that I have downloaded from the site. One ...

htmlcssfonts

What is the best way to ensure consistent image sizes using CSS?

I am struggling to make my 3 images all the same size. Setting the width and height styles is not working for me because the images maintain their aspect ratios, resulting in a messy layout. Here is what I currently have: https://i.sstatic.net/6AWPz.png ...

htmlcssimageresize

What is the best way to set a specific image as the initial image when loading 'SpriteSpin'?

I'm currently working on creating a 360-degree view using the SpriteSpin API. Everything is functioning as expected, but I have an additional request. I need to specify a specific image to be the initial landing image when the page loads. The landing ...

javascriptjqueryhtmlcss

Tips for streamlining the use of http.get() with or without parameters

retrievePosts(userId?: string): Observable<any> { const params = userId ? new HttpParams().set('userId', userId.toString()) : null; return this.http.get(ApiUrl + ApiPath, { params }); } I am attempting to streamline the two http.get ca ...

angulartypescriptangular-httpclient

Switching the focus of detection from a child to a parent

I am currently working on enhancing the functionality of my UI to display selections dynamically as they are selected or de-selected. import { Wizard } from './report-common'; import { Router } from '@angular/router'; import { DataServ ...

htmlangulartypescriptdata-bindingangular5