diff --git a/README.md b/README.md
index f20ae6b..5481fe2 100644
--- a/README.md
+++ b/README.md
@@ -40,11 +40,12 @@ export default function MyApp({ Component, pageProps }) {
 If no props are passed to `<NextNProgress />`, below is the default configuration applied.
 
 ```jsx
-<NextNProgress color="#29D" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} />
+<NextNProgress color="#29D" startPosition={0.3} startDelayMs={150} stopDelayMs={200} height={3} showOnShallow={true} />
 ```
 
 - `color`: to change the default color of progressbar. You can also use `rgb(,,)` or `rgba(,,,)`.
 - `startPosition`: to set the default starting position : `0.3 = 30%`.
+- `startDelayMs`: time for delay to start progressbar in `ms`.
 - `stopDelayMs`: time for delay to stop progressbar in `ms`.
 - `height`: height of progressbar in `px`.
 - `showOnShallow`: You can choose whether you want the progressbar to be displayed if you're using shallow routing. It takes a boolean. Learn more about shallow routing [in Next.js docs](https://nextjs.org/docs/routing/shallow-routing).
diff --git a/src/index.tsx b/src/index.tsx
index b138695..7bbe68c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -21,6 +21,10 @@ export interface NextNProgressProps {
    */
   startPosition?: number;
   /**
+   * The start delay in milliseconds.
+   * @default 250
+   */
+  startDelayMs?: number;  /**
    * The stop delay in milliseconds.
    * @default 200
    */
@@ -57,6 +61,7 @@ export interface NextNProgressProps {
 const NextNProgress = ({
   color = '#29D',
   startPosition = 0.3,
+  startDelayMs = 250,
   stopDelayMs = 200,
   height = 3,
   showOnShallow = true,
@@ -69,6 +74,7 @@ const NextNProgress = ({
   ),
 }: NextNProgressProps) => {
   let timer: NodeJS.Timeout | null = null;
+  let timeout: NodeJS.Timeout | null = null;
 
   React.useEffect(() => {
     if (options) {
@@ -92,10 +98,10 @@ const NextNProgress = ({
       shallow: boolean;
     },
   ) => {
-    if (!shallow || showOnShallow) {
+    timeout = setTimeout(() => {
       NProgress.set(startPosition);
       NProgress.start();
-    }
+    }, startDelayMs);
   };
 
   const routeChangeEnd = (
@@ -106,6 +112,10 @@ const NextNProgress = ({
       shallow: boolean;
     },
   ) => {
+    if (timeout) clearTimeout(timeout);
+    if (!NProgress.isStarted()) {
+      return;
+    }
     if (!shallow || showOnShallow) {
       if (timer) clearTimeout(timer);
       timer = setTimeout(() => {
@@ -204,6 +214,7 @@ const NextNProgress = ({
 NextNProgress.propTypes = {
   color: PropTypes.string,
   startPosition: PropTypes.number,
+  startDelayMs: PropTypes.number,
   stopDelayMs: PropTypes.number,
   height: PropTypes.number,
   showOnShallow: PropTypes.bool,