base styles
- colors
- fonts
atoms
- approved
- arrow
- blockquote
- brand
- button
- chip
- corner-label
- definition-list
- dot
- download-link
- fieldset
- figure
- flying-focus
- focus
- hamburger
- headings
- hide-text
- hr
- img
- input-checkbox
- input-error-message
- input-password
- input-radio
- input-submit
- input-text
- input-text-suffix
- label
- legend
- link
- list-item
- media
- notice
- ordered-list
- paragraph
- pill
- progress
- scale-indicator
- select
- source
- spinner
- status-icon
- survey-percentage
- table
- text-selection
- textarea
- toggle
- unordered-list
molecules
organisms
system
- flex
- grid
- helper-classes
templates-app
templates-website

progress-interface

Type: interactive element

Status: ready

Release: 0.1.0

Updated: 0.10.0

Dependencies:

atoms → arrow
atoms → progress
molecules → chart-circular

Dependents:

organisms → survey
organisms → survey-navigation

example

description

UPDATED 0.10.0:: For mobile: survey-percentage and progress-interface are integrated as a new element in survey-navigation;
There are two types for those elements. They change their position in the HTML structure for smaller screen sizes to integrate survey-navigation;
.circular-figure takes display: none; for mobile

UPDATED 0.3.0: JS update for new progress element.
UPDATED 0.2.0: JS updated for release 0.2.0
circular progress with navigation (for survey)

protected content

only loggeed in users are able to see source-code files and usage of components