archive-gh-me/react-circular-progressbar
1
0
Fork 0
mirror of https://github.com/kevinsqi/react-circular-progressbar.git synced 2026-01-18 15:55:06 +00:00
Code Issues Projects Releases Wiki Activity

tweak demos

Browse Source
This commit is contained in:
Kevin Qi 2017-12-17 15:25:29 -08:00
parent 8b444c770e
commit 030d54df14
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/demo.jsx
View File

@ -68,23 +68,25 @@ class Demo extends React.Component {
<h2 className="text-xs-center mb-3">Built with SVG and styled with plain CSS.</h2>
<Example
description="Change color/styling based on percentage."
description="Customize text and styling dynamically based on percentage."
>
<ChangingProgressbar
percentages={[75, 100]}
classForPercentage={(percentage) => {
return percentage === 100 ? 'complete' : 'incomplete';
}}
textForPercentage={(percentage) => {
return percentage === 100 ? `${percentage}!!` : `${percentage}`;
}}
/>
</Example>
<Example
description="Customize text and stroke width."
description="Customize stroke width or make it go counterclockwise."
>
<CircularProgressbar
percentage={33}
strokeWidth={5}
textForPercentage={(percentage) => `$${percentage}`}
counterClockwise
/>
</Example>
@ -102,7 +104,7 @@ class Demo extends React.Component {
</Example>
<Example
description="With SVG and CSS you can do anything."
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%' }}>