Progress

Gravity comes with a selection of animated progress components that you can drop into your interface.

Progress Bar




<div class="progress-bar">
  <div class="progress-fill" style="width: 50%;"></div>
</div>
// bar: class name or ID for the progress bar parent class
// eg. progress-bar in the example above
// width: string containing the width as a percentage: "80%";

updateProgressBar(bar, width)

Loading Screen

You can add a full-screen loading message that blocks all user interaction with with a simple Javascript function call.

// state: toggles the screen (true or false)
// message: string containing customised message

toggleLoadingScreen(state, message)

Steps

Steps can be used to indicate the current point in a multiple-stage process, such as filling in a long form.


  1. Basket
  2. Checkout
  3. Payment
<ol class="progress-steps">
  <li class="completed">Basket</li>
  <li class="completed">Checkout</li>
  <li>Payment</li>
</ol>

Chasing Dots

<div class="loader sk-dots">
 <div class="sk-child sk-bounce1"></div>
 <div class="sk-child sk-bounce2"></div>
 <div class="sk-child sk-bounce3"></div>
</div>

Cubes

<div class="loader sk-cubes">
 <div class="sk-cube sk-cube1"></div>
 <div class="sk-cube sk-cube2"></div>
</div>

Wave

<div class="loader sk-wave">
 <div class="sk-rect sk-rect1"></div>
 <div class="sk-rect sk-rect2"></div>
 <div class="sk-rect sk-rect3"></div>
 <div class="sk-rect sk-rect4"></div>
 <div class="sk-rect sk-rect5"></div>
</div>

For more loading animations, we recommending using Spinkit by Tobai Sahlin