# give/4.17.0/src/MultiFormGoals/resources/js/components/progress-bar/index.js

GiveWP – Donation Plugin and Fundraising Platform, version 4.17.0. 32 lines.

- Page: https://pluginprobe.com/plugins/give/4.17.0/code/src/MultiFormGoals/resources/js/components/progress-bar/index.js
- Raw: https://pluginprobe.com/plugins/give/4.17.0/raw/src/MultiFormGoals/resources/js/components/progress-bar/index.js
- Modified: 2021-11-23T23:55:18+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.17.0/code/src/MultiFormGoals/resources/js/components/progress-bar/index.js#L10-L20`.

```javascript
const ProgressBar = (props) => {
    const styles = {
        wrapper: {
            padding: '5px',
        },
        container: {
            height: '20px',
            overflow: 'hidden',
            borderRadius: '14px',
            backgroundColor: '#F1F1F1',
            boxShadow: 'inset 0px 1px 4px rgba(0, 0, 0, 0.09487)',
        },
        progress: {
            width: props.percent + '%',
            height: 'inherit',
            borderRadius: 'inherit',
            background: props.color,
            backgroundBlendMode: 'multiply',
        },
    };

    return (
        <div style={styles.wrapper}>
            <div style={styles.container}>
                <div style={styles.progress}></div>
            </div>
        </div>
    );
};

export default ProgressBar;

```