Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

progressspinner

v3.1.8arrow_drop_down
v3.1.8
v3.1.0
STATUS
Passing
DOWNLOADS
133
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
5 KB
ProgressSpinner is a process status indicator.
1 contributor
Install progressspinner as a package?
Copied
npm i @bit/primefaces.primereact.progressspinner
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
ProgressSpinner.js
35 Lines(30 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

export class ProgressSpinner extends Component {

    static defaultProps = {
        id: null,
        style: null,
        className: null,
        strokeWidth: "2",
        fill: "none",
        animationDuration: "2s"
    };

    static propTypes = {
        id: PropTypes.string,
        style: PropTypes.object,
        className: PropTypes.string,
        strokeWidth: PropTypes.string,
        fill: PropTypes.string,
        animationDuration: PropTypes.string
    };

    render() {
        let spinnerClass = classNames('p-progress-spinner',this.props.className);

        return <div id={this.props.id} style={this.props.style} className={spinnerClass}>
            <svg className="p-progress-spinner-svg" viewBox="25 25 50 50" style={{animationDuration: this.props.animationDuration}}>
                <circle className="p-progress-spinner-circle" cx="50" cy="50" r="20" fill={this.props.fill}
                        strokeWidth={this.props.strokeWidth} strokeMiterlimit="10"/>
            </svg>
        </div>;
    }
}