Progress Circle

Progress indicators express an unspecified wait time or display the length of a process. - Material Docs

import { ProgressCircle } from 'material-bread';

ProgressCircle s can be determinate or indeterminate . You can customize the size of the circle, the color of the track, color of the indicator and much more.

Live Editing

class ProgressCircleDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      circleValue3: 50
    }
  }
  render() {
    return (   
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        <ProgressCircle  />
        <ProgressCircle color={'#03A9F4'} animationDuration={1200} />
        <ProgressCircle color={'#E91E63'} animationDuration={3800} />
        <ProgressCircle color={'#009688'} animationDuration={4800} />
    </View>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { Button, ProgressCircle } from 'material-bread';

class ProgressCircleDemo extends React.Component {
    constructor(props) {
      super(props)
    }
    render() {
      return (
        <View>
          <ProgressCircle color={'#E91E63'} />
        </View>
      );
    }
}

Name

Description

Type

Default

animationDuration

Length of each animation loop in ms

number

1000

animationEasing

Easaing function

func

color

Color of circle

string

determinate

Whether circle continues to animate or not

bool

indicatorStartPosition

Where the indicator starts before the animation begins

number

shouldAnimateFirstValue

Whether the determinate value should animate at start

bool

true

size

Diameter of circle

number

style

Styles root element

object

trackStyle

Styles track containing the indicator

object

value

Percent out of 100 the indicator should fill in determinate mode

number

visible

Whether circle is visible or not

bool

widthOfBorder

The width of the track

number

You can see even more examples in the Storybook environment.

You must provide a value for the animation to stop at.

CHANGE VALUE

Live Editing

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        value: 10,
    }
  }
  render() {
    return (
      <View >    
        <ProgressCircle
            value={this.state.value}
            size={48}
            thickness={4}
            color="#2b80ff"
            unfilledColor="#f2f2f2"
            animationMethod="timing"
            animationConfig={{ speed: 1 }}
            shouldAnimateFirstValue
            determinate
        />

        <Button
            type="outlined"
            style={{ marginTop: 20 }}
            onPress={() => {
                this.setState({
                  value: Math.floor(Math.random() * Math.floor(100)),
                });
            }}
            text={'Change Value'}
        />
      </View>
    );
  }
}

Progress Circle

Component #

Usage #

Props #

Demos #

Determinate #