# oblador/react-native-progress

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/oblador-react-native-progress).**

3,669 stars · 510 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/oblador/react-native-progress
- awesome-repositories: https://awesome-repositories.com/repository/oblador-react-native-progress.md

## Description

react-native-progress is a collection of visual components for cross-platform mobile applications designed to represent completion percentages and loading states. It provides a set of progress bars, circular indicators, and loading spinners for mobile environments.

The library includes specific components for visualizing progress, such as a percentage progress pie, circular progress indicators with inner text, and linear progress bars. For active background processes, it provides animated loading spinners and activity spinners to signal ongoing tasks.

These components support task completion visualization and data progress monitoring through a variety of shapes, including rings, bars, and filled circular charts.

## Tags

### Mobile Development

- [React Native Components](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-components.md) — Offers a set of pre-built progress and loading visual components designed specifically for React Native mobile applications.
- [Loading State Visualizations](https://awesome-repositories.com/f/mobile-development/loading-state-visualizations.md) — Provides UI components and patterns to represent data fetching and background processing states via animated spinners.
- [Cross-Platform Mobile UI Kits](https://awesome-repositories.com/f/mobile-development/cross-platform-mobile-ui-kits.md) — Provides a consistent set of progress bars and spinners that work across different mobile operating systems.

### Part of an Awesome List

- [Activity Indicators](https://awesome-repositories.com/f/awesome-lists/devtools/activity-indicators.md) — Provides activity indicators to signal that a background process is currently running. ([source](https://github.com/oblador/react-native-progress/blob/master/package.json))
- [Loading Animations](https://awesome-repositories.com/f/awesome-lists/devtools/animation-and-transitions/loading-animations.md) — Ships animated rotating circle components to indicate ongoing background activity. ([source](https://github.com/oblador/react-native-progress#readme))
- [UI Components](https://awesome-repositories.com/f/awesome-lists/devtools/ui-components.md) — Progress indicators and spinners using native rendering.

### Data & Databases

- [Ring Charts](https://awesome-repositories.com/f/data-databases/data-visualization-charts/ring-charts.md) — Provides ring charts to visualize numeric completion values and data ratios within a mobile interface.

### Development Tools & Productivity

- [Linear Progress Bars](https://awesome-repositories.com/f/development-tools-productivity/task-progress-indicators/linear-progress-bars.md) — Implements horizontal progress bars that fill according to a numeric value or animate indefinitely. ([source](https://github.com/oblador/react-native-progress#readme))

### System Administration & Monitoring

- [Visual Progress Indicators](https://awesome-repositories.com/f/system-administration-monitoring/activity-monitors/activity-progress-monitors/task-progress-monitors/visual-progress-indicators.md) — Provides a suite of bars and circles that give real-time visual feedback on the completion status of a task. ([source](https://github.com/oblador/react-native-progress/blob/master/package.json))

### User Interface & Experience

- [Circular Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/circular-progress-indicators.md) — Provides circular indicators that display a filling arc based on a numeric value with center-aligned text. ([source](https://github.com/oblador/react-native-progress/blob/master/index.d.ts))
- [Progress Visualizations](https://awesome-repositories.com/f/user-interface-experience/progress-visualizations.md) — Implements linear and circular indicators to display the completion percentage of a background process.
- [Native Animation Drivers](https://awesome-repositories.com/f/user-interface-experience/native-animation-drivers.md) — Utilizes native animation drivers to ensure smooth, high-performance rotations for loading spinners by bypassing the JavaScript bridge.
- [Pie Charts](https://awesome-repositories.com/f/user-interface-experience/pie-charts.md) — Includes a filled circular pie chart component used to visualize a specific percentage of task completion.

### Graphics & Multimedia

- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Employs scalable vector graphics (SVG) to render precise shapes and arcs that remain sharp across all screen densities.

### Web Development

- [Declarative UI Composition](https://awesome-repositories.com/f/web-development/declarative-ui-composition.md) — Builds complex progress indicators by nesting basic SVG primitives within a declarative React component hierarchy.