mirror of
https://github.com/kevinsqi/react-circular-progressbar.git
synced 2026-01-18 15:55:06 +00:00
port demo from /docs to /demo, with some slight modifications (remove codesandbox iframe, etc)
This commit is contained in:
Kevin Qi
parent
25df89efc4
commit
99d5001fe4
@ -3,10 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
@ -23,6 +20,11 @@
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
@ -1 +1,25 @@
|
||||
.bg-yellow {
|
||||
background-color: #f8e8d5;
|
||||
}
|
||||
|
||||
/* bootstrap overrides */
|
||||
a {
|
||||
color: #3e98c7;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* demo style overrides */
|
||||
.CircularProgressbar.incomplete .CircularProgressbar-path {
|
||||
stroke: #f66;
|
||||
}
|
||||
.CircularProgressbar.incomplete .CircularProgressbar-text {
|
||||
fill: #f66;
|
||||
}
|
||||
.CircularProgressbar.complete .CircularProgressbar-path {
|
||||
stroke: #99f;
|
||||
}
|
||||
.CircularProgressbar.complete .CircularProgressbar-text {
|
||||
fill: #99f;
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import CircularProgressbar from 'react-circular-progressbar';
|
||||
import Demo from './Demo';
|
||||
|
||||
// Stylesheets
|
||||
import 'react-circular-progressbar/dist/styles.css';
|
||||
@ -9,7 +10,7 @@ class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<CircularProgressbar percentage={66} />
|
||||
<Demo />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
71
demo/src/ChangingProgressbar.tsx
Normal file
71
demo/src/ChangingProgressbar.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import CircularProgressbar from 'react-circular-progressbar';
|
||||
|
||||
type CircularProgressbarProps = {
|
||||
counterClockwise?: boolean;
|
||||
strokeWidth?: number;
|
||||
};
|
||||
|
||||
type Props = CircularProgressbarProps &
|
||||
typeof ChangingProgressbar.defaultProps & {
|
||||
percentages: number[];
|
||||
classForPercentage?: (percentage: number) => string;
|
||||
stylesForPercentage?: (percentage: number) => {};
|
||||
textForPercentage?: (percentage: number) => string;
|
||||
};
|
||||
|
||||
type State = {
|
||||
currentPercentageIndex: number;
|
||||
};
|
||||
|
||||
class ChangingProgressbar extends React.Component<Props, State> {
|
||||
static defaultProps = {
|
||||
interval: 1000,
|
||||
classForPercentage: (percentage: number) => '',
|
||||
stylesForPercentage: (percentage: number) => ({}),
|
||||
textForPercentage: (percentage: number) => `${percentage}%`,
|
||||
};
|
||||
|
||||
state = {
|
||||
currentPercentageIndex: 0,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
setInterval(() => {
|
||||
this.setState({
|
||||
currentPercentageIndex:
|
||||
(this.state.currentPercentageIndex + 1) % this.props.percentages.length,
|
||||
});
|
||||
}, this.props.interval);
|
||||
}
|
||||
|
||||
getCurrentPercentage() {
|
||||
return this.props.percentages[this.state.currentPercentageIndex];
|
||||
}
|
||||
|
||||
getClassName() {
|
||||
return this.props.classForPercentage(this.getCurrentPercentage());
|
||||
}
|
||||
|
||||
getStyles(): any {
|
||||
return this.props.stylesForPercentage(this.getCurrentPercentage());
|
||||
}
|
||||
|
||||
getText() {
|
||||
return this.props.textForPercentage(this.getCurrentPercentage());
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CircularProgressbar
|
||||
{...this.props}
|
||||
className={this.getClassName()}
|
||||
percentage={this.getCurrentPercentage()}
|
||||
text={this.getText()}
|
||||
styles={this.getStyles()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ChangingProgressbar;
|
||||
111
demo/src/Demo.tsx
Normal file
111
demo/src/Demo.tsx
Normal file
@ -0,0 +1,111 @@
|
||||
import React from 'react';
|
||||
import CircularProgressbar from 'react-circular-progressbar';
|
||||
import ChangingProgressbar from './ChangingProgressbar';
|
||||
|
||||
const githubURL = 'https://github.com/kevinsqi/react-circular-progressbar';
|
||||
|
||||
const Example: React.FunctionComponent<{ description: string }> = ({ description, children }) => (
|
||||
<div className="col-12 col-sm-6 col-md-3">
|
||||
<div className="row mb-1">
|
||||
<div className="col-6 offset-3">{children}</div>
|
||||
</div>
|
||||
<p className="text-center">{description}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
function Demo() {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row mt-5">
|
||||
<div className="col-12">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-3">react-circular-progressbar</h1>
|
||||
<p>A circular progress indicator component</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row mt-5 mb-5">
|
||||
<div className="col-6 offset-3 col-md-2 offset-md-5">
|
||||
<ChangingProgressbar
|
||||
percentages={[0, 20, 40, 60, 80, 100]}
|
||||
stylesForPercentage={(percentage: number) => {
|
||||
const alpha = (100 + percentage) / 200;
|
||||
return {
|
||||
path: {
|
||||
stroke: `rgba(62, 152, 199, ${alpha})`,
|
||||
},
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<div className="row mt-5">
|
||||
<div className="col-12 mb-5">
|
||||
<h2 className="text-center">Built with SVG and styled with plain CSS.</h2>
|
||||
</div>
|
||||
|
||||
<Example description="Customize text and styling dynamically based on percentage.">
|
||||
<ChangingProgressbar
|
||||
percentages={[75, 100]}
|
||||
classForPercentage={(percentage: number) => {
|
||||
return percentage === 100 ? 'complete' : 'incomplete';
|
||||
}}
|
||||
textForPercentage={(percentage: number) => {
|
||||
return percentage === 100 ? `${percentage}!!` : `${percentage}`;
|
||||
}}
|
||||
/>
|
||||
</Example>
|
||||
|
||||
<Example description="Customize stroke width and make it go counterclockwise.">
|
||||
<ChangingProgressbar percentages={[0, 20, 80]} strokeWidth={5} counterClockwise />
|
||||
</Example>
|
||||
|
||||
<Example description="Add a background color for that inverted look.">
|
||||
<CircularProgressbar
|
||||
className="CircularProgressbar-inverted"
|
||||
background
|
||||
backgroundPadding={5}
|
||||
strokeWidth={6}
|
||||
percentage={66}
|
||||
text={`${66}%`}
|
||||
/>
|
||||
</Example>
|
||||
|
||||
<Example description="With SVG and CSS you can do whatever you want.">
|
||||
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
|
||||
<div style={{ position: 'absolute', width: '100%' }}>
|
||||
<CircularProgressbar percentage={50} />
|
||||
</div>
|
||||
<div style={{ width: '100%', padding: '10%' }}>
|
||||
<img style={{ width: '100%' }} src="https://i.imgur.com/b9NyUGm.png" alt="doge" />
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<div className="mt-5 mb-5">
|
||||
<h2 className="text-center">Installation</h2>
|
||||
<div className="text-center mt-5">
|
||||
<p>Install with yarn or npm:</p>
|
||||
<p className="mb-5">
|
||||
<code className="p-2 text-dark bg-yellow">yarn add react-circular-progressbar</code>
|
||||
</p>
|
||||
<a className="btn btn-info btn-lg" href={githubURL}>
|
||||
View docs on Github
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="mt-5">
|
||||
Built by <a href="https://www.kevinqi.com/">@kevinsqi</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Demo;
|
||||
@ -11,6 +11,20 @@ const CENTER_Y = 50;
|
||||
|
||||
type CircularProgressbarProps = typeof CircularProgressbar.defaultProps & {
|
||||
percentage: number;
|
||||
classes?: {
|
||||
root?: string;
|
||||
trail?: string;
|
||||
path?: string;
|
||||
text?: string;
|
||||
background?: string;
|
||||
};
|
||||
styles?: {
|
||||
root?: object;
|
||||
trail?: object;
|
||||
path?: object;
|
||||
text?: object;
|
||||
background?: object;
|
||||
};
|
||||
};
|
||||
|
||||
type CircularProgressbarState = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user