Live Demo
Anatomy
Pagination gives users the ability to move forward or backward, or go directly to a specific page.
- Progress bar
- Background
- Progress
Layout and spacing
- Height : 8px
- Border radius : 8px
Variations
Progress has two available shapes — bar or a circle, with bar being the default shape.
Guidelines
- Use progress indicator for long operation or a process that can take a considerable amount of time.
- Position Progress indicators in the center of a screen for general functions.
- For discrete tasks within a screen, position a Progress indicator adjacent to that task.
- Do not use Progress indicators for complex tasks with distinct milestones, instead use steps
- Use progress indicators to convey that data is being requested, transferred or processed.