How does the loading screen work?

The loading screen is the screen you'd like your clients and stakeholders to see when your prototype is loading via a share link. It will appear while loading your prototype and then automatically transition to the screen you selected your prototype to start on; there is no need to add an automatic redirect to that screen.

Setting a loading screen

From the prototype page, click Set a Loading Screen. The file must be a PNG and sized correctly to the device.

Troubleshooting your loading screen

If you've already uploaded a loading screen and it’s not displaying when you view the prototype via a share link, hover over the thumbnail for the loading screen, click the trash can icon, and re-upload as stated above.

Increasing the display duration of your loading screen

The length of time the loading screen displays is entirely dependent on how long it takes for your prototype to load—which is affected by the prototype size and Internet speed.

If you want the loading screen to display longer than it is currently, we recommend establishing a timed redirect away from a regular screen (that you would otherwise set as a loading screen).

To create a timed redirect away from a regular screen that you want to behave as a loading screen:

1. After uploading the image you want to use as a loading screen, ensure that it's placed as the first regular screen in your prototype (i.e., just to the right of the Set a Loading Screen slot), and then click the thumbnail to open the screen.
2. In the toolbar at the bottom of the page, click the Build mode icon ().
3. At the top of the page, click the timer icon ().
4. In the timed redirect dialog
   • Click the Select a destination screen dropdown and select the screen you want users to see after the loading screen.
   • In the After field, enter the duration of time you want the loading screen to display.
   • Click the Transition dropdown and select a transition type. 
   • Click Save.