Progress-wizard-example

This is an ember-cli example app that shows an animated progress bar which state is persisted between routes.

This progress var can be very useful when setting a wizard-like guide or walkthrough on an ember app that spans across multiple routes.

How?

The progress bar percentage can be set on each route. When navigating between these routes the progress bar will be set to the routes progressPercent property and animate accordingly.

The animated progress works just by setting a css transition property on the progress element. See app/styles/app.css.

The most importants elements for this example are:

• app/components/progress-bar.js component
• app/mixins/progress-bar.js mixin
• progressPercent property that is set on the routes under the nav route
• app/styles/app.css styles to animate the progress bar when the width changes
• app/templates/nav.hbs template where the component is used

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with NPM) and Bower

Installation

• git clone <repository-url> this repository
• change into the new directory
• npm install
• bower install

Running / Development

• ember server
• Visit your app at http://localhost:4200.

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

• ember test
• ember test --server

Building

• ember build (development)
• ember build --environment production (production)

Deploying

Specify what it takes to deploy your app.

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox