Stripe Progress

A progress bar whose fill grows with a spring and whose diagonal stripes drift along it. Leave value out and a segment travels across the track instead. The stripes are plain rotated views, so it needs no gradient or SVG package. With reduced motion nothing drifts or travels, but the fill still follows the value. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add stripe-progress

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/stripe-progress.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { StripeProgress } from "@/components/ui/stripe-progress";

export default function Example() {
  return (
    <>
      <StripeProgress label="Uploading" value={0.64} showPercent />
      <StripeProgress label="Syncing" />
    </>
  );
}

Props