Menu Icon

Progress

A progress shows status by percentage unit. They let users know what is going performance of related subject.

Usage

Shape of graphic comes with three different types of progresses to use. Design characteristics comes with four different status of progresses to use. They configure visualization and emphasis.

Guidance

  • Progresses should indicate a quantitative index.
  • They should be colored to represent meaning of Progress.

When to use

  • Use Progresses to display a score.

Additional info

  • Consider using show info to add icon to Progresses.
  • Consider editing stroke width to change density of Progress shape.

Variations

  • The updatable properties of Progresses are type, percent %, stroke color, trail color, stroke linecap, status, size, stroke width and width.
  • The updatable behaviour of Progresses is show info.
  • The updatable style features of Progresses are margin, padding, typography and css.
  • The usable dynamic properties of Progresses are strokeLinecap, status, showInfo, size, strokeWidth, mask, width, hidden and style.

Hints

  • Consider using dynamic property of percent to create an interactive Progress automatically updating synchronizingly with data source.