Progress

Requires:

@ray-js/ray≥0.6.15

Description

Progress bar component for displaying the current progress of an operation or task.

Props

Property	Type	Required	Default	Description
`percent`	number	No	0	Current progress, range 0-100
`showInfo`	boolean	No	false	Whether to show the percentage on the right of the progress bar
`borderRadius`	number \| string	No	0	Corner radius, default unit rpx
`fontSize`	number \| string	No	16	Right-side percentage font size, default unit px
`strokeWidth`	number \| string	No	6	Progress bar line width, default unit rpx
`activeColor`	string	No	#007aff	Color of the completed portion
`backgroundColor`	string	No	rgba(0,0,0,0.04)	Color of the unfinished portion
`active`	boolean	No	false	Whether to enable left-to-right progress animation
`activeMode`	"backwards" \| "forwards"	No	backwards	Animation playback mode: backwards plays from the beginning; forwards continues from the last end point

Valid Values

`activeMode`

Value	Description	Since
`backwards`	Play the progress animation from the beginning each time	-
`forwards`	Resume the progress animation from where it last ended	-

Examples

Basic usage

import React from 'react';
import { View, Progress } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <Progress percent={50} strokeWidth={8} />
    </View>
  );
}

Display percentage

import React from 'react';
import { View, Progress } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <View style={{ marginBottom: 20 }}>
        <Progress percent={20} showInfo strokeWidth={8} />
      </View>
      <View style={{ marginBottom: 20 }}>
        <Progress percent={60} showInfo strokeWidth={8} />
      </View>
      <View>
        <Progress percent={100} showInfo strokeWidth={8} />
      </View>
    </View>
  );
}

Custom styles

import React from 'react';
import { View, Progress } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <View style={{ marginBottom: 20 }}>
        <Progress
          percent={70}
          showInfo
          strokeWidth={12}
          borderRadius={6}
          fontSize={14}
          activeColor="#52c41a"
          backgroundColor="#e8e8e8"
        />
      </View>
      <View>
        <Progress
          percent={40}
          showInfo
          strokeWidth={12}
          borderRadius={6}
          activeColor="#ff4d4f"
          backgroundColor="#fff1f0"
        />
      </View>
    </View>
  );
}

Progress animation

import React, { useState } from 'react';
import { View, Progress, Button } from '@ray-js/ray';

export default function Demo() {
  const [percent, setPercent] = useState(0);

  return (
    <View style={{ padding: 20 }}>
      <Progress
        percent={percent}
        showInfo
        strokeWidth={8}
        active
        activeMode="forwards"
      />
      <View style={{ marginTop: 20, display: 'flex', flexDirection: 'row', gap: '10px' }}>
        <Button size="mini" onClick={() => setPercent(Math.min(percent + 20, 100))}>
          Increase
        </Button>
        <Button size="mini" onClick={() => setPercent(0)}>
          Reset
        </Button>
      </View>
    </View>
  );
}