Skip to content

khusharth/gradient-arc-progress-indicator

Repository files navigation

🌈 Gradient Arc Progress Indicator

An arc shaped progress indicator component that visually communicates user's progress within a customizable range using beautiful gradients. The progress is displayed between the provided minimum and maximum values.

📽️ Demo

component animation

👨‍💻 Technology Stack

react-native svg-support

🐣 Prerequisites

You can choose either one of the following steps:

1. Automatic setup using volta

  • Install volta and it will automatically start using the appropriate node and pnpm version for you

2. Manual install

⚡ Installation

  1. Clone / Download this repo.

  2. Inside the project open a terminal and run:

    pnpm install
    

    This will install all the project dependencies.

  3. To start the development server run:

    pnpm start
    

Running on a Physical Android or iOS device

  1. Install the Expo Go app on your iOS or Android phone and connect to the same wireless network as your computer.

    • On Android, use the Expo Go app to scan the QR code from your terminal to open your project.
    • On iOS, use the built-in QR code scanner of the default iOS Camera app.

OR

Running on a Simulator or Virtual device

  1. If you want to run the same on a simulator or virtual device, you can setup the same using the steps mentioned in the react native docs.

  2. For iOS run pnpm run ios to start the iOS simulator and for Android run pnpm run android to start the Android simulator

🤵‍♂️ Author

Twitter

LinkedIn