Progress

Progress is a commonly used component that can control the current progress with gestures, or it can only be used for display.

Code demo

Basic usage

import { Progress } from 'tuya-panel-kit'

<Progress
  foreColor={{
    '0%': '#1381FB',
    '100%': '#00C36C',
  }}
  style={{ width: 100, height: 100 }}
  needMaxCircle={true}
  startColor="#1381FB"
  thumbRadius={4}
  value={50}
  startDegree={135}
  andDegree={270}
/>

Spacing form

import { Progress } from 'tuya-panel-kit'

<Progress.Space strokeWidth={2} scaleNumber={70} style={{ width: 100, height: 100 }} />

Double drag form

import { Progress } from 'tuya-panel-kit'

<Progress.Double
  foreColor={{
    '0%': '#1381FB',
    '100%': '#00C36C',
  }}
  startDegree={170}
  style={{ width: 100, height: 100 }}
/>

Combination form

import { Progress } from 'tuya-panel-kit'

<Progress.Compose style={{ width: 100, height: 100 }} />

Tuya Design

Progress

Code demo

Basic usage

Spacing form

Double drag form

Combination form

API

Progress

Progress.Space

Progress.Double

Progress.Compose