Page loading progress bar (nprogress)

Usage example, including component/hook API

Can be used to indicate that something is loading. See for example nprogress or react-top-loading-bar

Possible implementation – describe how the feature can be implemented

Should probably use the existing Progress component when implementing this.

I’m not 100% sure what the best way to implement this would be. Perhaps a hook:

const App = () => {
  const { start, stop, increment, ProgressBar }= useProgressBar({
    color: "pink",
  })

  return (
    <div>
      <ProgressBar />
      <Button onClick={start}>Load</Button>
      <Button onClick={end}>Finish</Button>
    </div>
  )
}

Do you want to contribute this feature and create a pull request

Yes

[AlbertBronsky]

@elmaxe @rtivital Any progress (no pun intended) on this? 😃

[rtivital]

Thanks for feature request, it’s a good feature that should be added as a new package @mantine/nprogress, with this implementation:

• Provider component

import { NProgressProvider } from '@mantine/nprogress';
import { MantineProvider } from '@mantine/core';

export function App() {
  return (
    <MantineProvider>
      <NProgressProvider color="red" size={15}>
        <AppItself />
      </NProgressProvider>
    </MantineProvider>
  );
}

• consumer component

const Consumer = () => {
  // hook can override options defined on Provider, options are not required
  const { start, stop, set }= useNProgress({ size: 5, color: 'blue' });

  return (
    <>
      <Button onClick={start}>Load</Button>
      <Button onClick={() => set(30)}>Set 30</Button>
      <Button onClick={end}>Finish</Button>
    </>
  )
}

Do you want to work on this package?