# extendify/0.9.3/src/Onboarding/components/ProgressBar.js

Extendify, version 0.9.3. 26 lines.

- Page: https://pluginprobe.com/plugins/extendify/0.9.3/code/src/Onboarding/components/ProgressBar.js
- Raw: https://pluginprobe.com/plugins/extendify/0.9.3/raw/src/Onboarding/components/ProgressBar.js
- Modified: 2022-06-28T12:51:48+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/extendify/0.9.3/code/src/Onboarding/components/ProgressBar.js#L10-L20`.

```javascript
export const ProgressBar = ({ currentPageIndex, totalPages }) => {
    const currentProgress = Math.round(
        ((currentPageIndex + 1) / totalPages) * 100,
    )
    const currentPageText = `(${currentPageIndex}/${totalPages - 1})`

    return (
        <div className="flex-1 hidden md:flex justify-center items-center">
            <div
                role="progressbar"
                aria-valuenow={currentProgress}
                aria-valuemin="0"
                aria-valuetext={currentPageText}
                aria-valuemax="100"
                className="w-32 bg-gray-200 h-2 rounded-full">
                <div
                    className="rounded-full bg-partner-primary-bg h-2"
                    style={{
                        width: `${currentProgress}%`,
                    }}></div>
            </div>
            <div className="pl-2 flex justify-center">{currentPageText}</div>
        </div>
    )
}

```