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.
At the moment, you can't sync the loading screen directly from Sketch or Studio into the loading screen slot. You'll want to export that screen to your desktop and then you can upload that screen separately by clicking Set a Loading Screen.
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:
- 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.
- In the toolbar at the bottom of the page, click the Build mode icon ().
- At the top of the page, click the timer icon ().
- 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.