[SOLVED] Display a Spinner while your App Loads

announce
1

This is probably of more use to starters like myself as I am sure there are other ways of tackling this.

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 :)

3 Likes
2

This is absolutely awesome! You have saved my day, this is exactly what I needed.

3

I’ve been using this one forever

https://atmospherejs.com/sacha/spin

But if you search for spinner on atmospherejs there are a bunch.