loading

A beautiful loading splash screen for your Meteor app

This is a bundle of PleaseWait.js + SpinKit CSS Spinners packaged for Meteor

PleaseWait.js "A simple library to show your users a beautiful splash page while your application loads." https://github.com/Pathgather/please-wait

SpinKit "A collection of loading indicators animated with CSS." https://github.com/tobiasahlin/SpinKit

Install

meteor add pcel:loading

Demo

loading.meteor.com and demo source here

Usage

Template

1<template name="loading">
2</template>

Javascript (pleaseWait demo/docs here)

1Template.loading.rendered = function () {
2  if ( ! Session.get('loadingSplash') ) {
3    this.loading = window.pleaseWait({
4      logo: '/images/Meteor-logo.png',
5      backgroundColor: '#7f8c8d',
6      loadingHtml: message + spinner
7    });
8    Session.set('loadingSplash', true); // just show loading splash once
9  }
10};
11
12Template.loading.destroyed = function () {
13  if ( this.loading ) {
14    this.loading.finish();
15  }
16};
17
18var message = '<p class="loading-message">Loading Message</p>';
19var spinner = '<div class="sk-spinner sk-spinner-rotating-plane"></div>';

CSS (SpinKit spinners: here)

1.loading-message {
2  color: #fff;
3  font-size: 25px;
4  font-weight: 300;
5  font-family: sans-serif;
6}
7
8.sk-spinner-rotating-plane.sk-spinner {
9  background-color: #fff;
10}

Use with iron-router

1Router.configure({
2  loadingTemplate: 'loading'
3});