Skip to content
How to add a loading screen to you project in Meteor
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Displaying Loading Screens to Waiting Users

I came across an issue where I was having to wait a second or two for my app to load, in the meantime I was looking at a blank page. I don't think it's healthy to expect a user to look at a blank screen while your app gets up, gets dressed and leaves for work 2 seconds late.

The solution was to give the user an animation to watch while it loaded. This short tutorial will show you how to do that using SVG images. The same method can be adapted to use CSS loaders.

  1. Download and unzip the repo from here
  2. Run meteor from the root folder of the unzipped file.
  3. See it in action at http://localhost:3000/

If you intend to adapt the code for your own project you need to add this package; meteorhacks:inject-initial, which will give you an 'API to modify the initial HTML sent by Meteor to the client.'. You also need to remove autopublish with meteor remove autopublish

Place any loading screen svg files you have inside of public/svg-loaders. The ones supplied with this code sample were provided by Sam Herbert

All code is commented but the key files to examine are:

  • /private/spinner.html
  • /public/svg-loaders
  • svgLoader.html
  • svgLoader.js
  • svgLoader.css

The finished example can be found here Enjoy :)

You can’t perform that action at this time.