UI Elements

UI Elements

Loaders make it easy to asynchronously load data in an activity or fragment

Loaders make it easy to asynchronously load data in an activity or fragment.

4.12.1 Types

  • Determinate

It indicate an approximate percentage of completion. It has total 20 boxes and each box represents 5%.

  • Indeterminate

It indicate that an operation is ongoing.

Progress & Loaders
Fig 4.12.1 Progress & Loaders

4.12.2 Guideline

Guideline for the header/footer are listed below.

  • It will come in the center of the frame horizontally/Vertically from where the action is performed
  • The loaders will be available in all the default sizes like & which will change basing on the screen resolution in both web and mobile.
  • The determinant loader will convert it’s size basing on the screen size. The default size of the boxes will be 20PX each, while its place holder height will be 30PX.
  • In the Indeterminate If the operation is modal (blocks user interaction), and takes longer than 10 seconds, there is a provision for user to click outside and cancel the operation.

4.12.3 Behaviour

  • Determinate

In its active state, the White(#ffffff)   color boxes will be filled with SkyBlue(#2991d6)   color as per data loads.

  • Indeterminate

In its active states circle will perform circular animation until full data loads

4.12.4 Usage

  • Determinate

Use the determinate progress bar when a task is determinate, that is when it has a well-defined duration or a predictable end.

  • Indeterminate
  • Use the indeterminate progress ring for tasks that are not determinate


Copyright © 2015 DP World. All rights reserved.