1---
2category: '@Integrations'
3---
4 
5# useNProgress
6 
7Reactive wrapper for [`nprogress`](https://github.com/rstacruz/nprogress).
8 
9## Install
10 
11```bash
12npm i nprogress@^0
13```
14 
15## Usage
16 
17```ts {6}
18import { useNProgress } from '@vueuse/integrations/useNProgress'
19 
20const { isLoading } = useNProgress()
21 
22function toggle() {
23  isLoading.value = !isLoading.value
24}
25```
26 
27### Passing a progress percentage
28 
29You can pass a percentage to indicate where the bar should start from.
30 
31```ts {3}
32import { useNProgress } from '@vueuse/integrations/useNProgress'
33 
34const { progress } = useNProgress(0.5)
35 
36function done() {
37  progress.value = 1.0
38}
39```
40 
41> To change the progress percentage, set `progress.value = n`, where n is a number between 0..1.
42 
43### Customization
44 
45Just edit [nprogress.css](https://github.com/rstacruz/nprogress/blob/master/nprogress.css) to your liking. Tip: you probably only want to find and replace occurrences of #29d.
46 
47You can [configure](https://github.com/rstacruz/nprogress#configuration) it by passing an object as a second parameter.
48 
49```ts {4}
50import { useNProgress } from '@vueuse/integrations/useNProgress'
51 
52useNProgress(null, {
53  minimum: 0.1,
54  // ...
55})
56```
57 
58## Type Declarations
59 
60```ts
61export type UseNProgressOptions = Partial<NProgressOptions>
62export interface UseNProgressReturn {
63  isLoading: WritableComputedRef<boolean, boolean>
64  progress: Ref<number | null | undefined>
65  start: () => NProgress
66  done: (force?: boolean) => NProgress
67  remove: () => void
68}
69/**
70 * Reactive progress bar.
71 *
72 * @see https://vueuse.org/useNProgress
73 */
74export declare function useNProgress(
75  currentProgress?: MaybeRefOrGetter<number | null | undefined>,
76  options?: UseNProgressOptions,
77): UseNProgressReturn
78```
79