diff --git a/JSR.md b/JSR.md
index dd447a2..25f7c72 100644
--- a/JSR.md
+++ b/JSR.md
@@ -144,6 +144,7 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
   height={3}
   crawl={true}
   showSpinner={true}
+  spinnerPosition="top-right"
   easing="ease"
   speed={200}
   shadow="0 0 10px #2299DD,0 0 5px #2299DD"
@@ -162,6 +163,7 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
 - `height`: height of TopLoader in `px`.
 - `crawl`: auto incrementing behavior for the TopLoader.
 - `showSpinner`: to show spinner or not.
+- `spinnerPosition`: to change the corner position of the spinner (top-right, top-left, bottom-right, bottom-left).
 - `shadow`: a smooth shadow for the TopLoader. (set to `false` to disable it)
 - `template`: to include custom HTML attributes for the TopLoader.
 - `zIndex`: defines zIndex for the TopLoader.
@@ -177,6 +179,7 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
 | `height`          | `number`          | `3`                                                                                                                                                 |
 | `crawl`           | `boolean`         | `true`                                                                                                                                              |
 | `showSpinner`     | `boolean`         | `true`                                                                                                                                              |
+| `spinnerPosition` | `string`          | `"top-right"`                                                                                                                                       |
 | `easing`          | `string`          | `"ease"`                                                                                                                                            |
 | `speed`           | `number`          | `200`                                                                                                                                               |
 | `shadow`          | `string \| false` | `"0 0 10px ${color}, 0 0 5px ${color}"`                                                                                                             |
diff --git a/README.md b/README.md
index c06c055..da4d0c4 100644
--- a/README.md
+++ b/README.md
@@ -135,6 +135,7 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
   height={3}
   crawl={true}
   showSpinner={true}
+  spinnerPosition="top-right"
   easing="ease"
   speed={200}
   shadow="0 0 10px #2299DD,0 0 5px #2299DD"
@@ -153,6 +154,7 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
 - `height`: height of TopLoader in `px`.
 - `crawl`: auto incrementing behavior for the TopLoader.
 - `showSpinner`: to show spinner or not.
+- `spinnerPosition`: to change the corner position of the spinner (top-right, top-left, bottom-right, bottom-left).
 - `shadow`: a smooth shadow for the TopLoader. (set to `false` to disable it)
 - `template`: to include custom HTML attributes for the TopLoader.
 - `zIndex`: defines zIndex for the TopLoader.
@@ -168,6 +170,7 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
 | `height`          | `number`          | `3`                                                                                                                                     |
 | `crawl`           | `boolean`         | `true`                                                                                                                                  |
 | `showSpinner`     | `boolean`         | `true`                                                                                                                                  |
+| `spinnerPosition` | `string`          | `"top-right"`                                                                                                                           |
 | `easing`          | `string`          | `"ease"`                                                                                                                                |
 | `speed`           | `number`          | `200`                                                                                                                                   |
 | `shadow`          | `string \| false` | `"0 0 10px #2299DD,0 0 5px #2299DD"`                                                                                                    |
diff --git a/src/index.tsx b/src/index.tsx
index 7dce0a8..1320534 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -45,6 +45,11 @@ export type NextTopLoaderProps = {
    * @default true
    */
   showSpinner?: boolean;
+  /**
+   * To change the corner position of the spinner. (top-left, top-right, bottom-left, bottom-right)
+   * @default "top-right"
+   */
+  spinnerPosition?: string;
   /**
    * Animation settings using easing (a CSS easing string).
    * @default "ease"
@@ -95,6 +100,7 @@ const NextTopLoader = ({
   color: propColor,
   height: propHeight,
   showSpinner,
+  spinnerPosition,
   crawl,
   crawlSpeed,
   initialPosition,
@@ -116,19 +122,38 @@ const NextTopLoader = ({
     !shadow && shadow !== undefined
       ? ''
       : shadow
-        ? `box-shadow:${shadow}`
-        : `box-shadow:0 0 10px ${color},0 0 5px ${color}`;
+      ? `box-shadow:${shadow}`
+      : `box-shadow:0 0 10px ${color},0 0 5px ${color}`;
 
   // Check if to show at bottom
   const positionStyle = showAtBottom ? 'bottom: 0;' : 'top: 0;';
-  const spinnerPositionStyle = showAtBottom ? 'bottom: 15px;' : 'top: 15px;';
+
+  // Setting the corner position of the spinner
+  let spinnerPositionStyle;
+  switch (spinnerPosition) {
+    case 'top-right':
+      spinnerPositionStyle = 'top: 15px; right: 15px;';
+      break;
+    case 'top-left':
+      spinnerPositionStyle = 'top: 15px; left: 15px;';
+      break;
+    case 'bottom-right':
+      spinnerPositionStyle = 'bottom: 15px; right: 15px;';
+      break;
+    case 'bottom-left':
+      spinnerPositionStyle = 'bottom: 15px; left: 15px;';
+      break;
+    default:
+      spinnerPositionStyle = 'top: 15px; right: 15px;';
+      break;
+  }
 
   /**
    * CSS Styles for the NextTopLoader
    */
   const styles = (
     <style>
-      {`#nprogress{pointer-events:none}#nprogress .bar{background:${color};position:fixed;z-index:${zIndex};${positionStyle}left:0;width:100%;height:${height}px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;${boxShadow};opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:${zIndex};${spinnerPositionStyle}right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${color};border-left-color:${color};border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`}
+      {`#nprogress{pointer-events:none}#nprogress .bar{background:${color};position:fixed;z-index:${zIndex};${positionStyle}left:0;width:100%;height:${height}px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;${boxShadow};opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:${zIndex};${spinnerPositionStyle}}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${color};border-left-color:${color};border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`}
     </style>
   );
 
@@ -288,10 +313,10 @@ const NextTopLoader = ({
     })((window as Window).history);
 
     /**
- * Complete TopLoader Progress on replacing current entry of history stack
- * @param {History}
- * @returns {void}
- */
+     * Complete TopLoader Progress on replacing current entry of history stack
+     * @param {History}
+     * @returns {void}
+     */
     ((history: History): void => {
       const replaceState = history.replaceState;
       history.replaceState = (...args) => {
@@ -335,6 +360,7 @@ NextTopLoader.propTypes = {
   color: PropTypes.string,
   height: PropTypes.number,
   showSpinner: PropTypes.bool,
+  spinnerPosition: PropTypes.string,
   crawl: PropTypes.bool,
   crawlSpeed: PropTypes.number,
   initialPosition: PropTypes.number,
diff --git a/src/pages.tsx b/src/pages.tsx
index 6d69431..3b0f823 100644
--- a/src/pages.tsx
+++ b/src/pages.tsx
@@ -13,6 +13,7 @@ export const PagesTopLoader = ({
   color: propColor,
   height: propHeight,
   showSpinner,
+  spinnerPosition,
   crawl,
   crawlSpeed,
   initialPosition,
@@ -39,7 +40,26 @@ export const PagesTopLoader = ({
 
   // Check if to show at bottom
   const positionStyle = showAtBottom ? 'bottom: 0;' : 'top: 0;';
-  const spinnerPositionStyle = showAtBottom ? 'bottom: 15px;' : 'top: 15px;';
+
+  // Setting the corner position of the spinner
+  let spinnerPositionStyle;
+  switch (spinnerPosition) {
+    case 'top-right':
+      spinnerPositionStyle = 'top: 15px; right: 15px;';
+      break;
+    case 'top-left':
+      spinnerPositionStyle = 'top: 15px; left: 15px;';
+      break;
+    case 'bottom-right':
+      spinnerPositionStyle = 'bottom: 15px; right: 15px;';
+      break;
+    case 'bottom-left':
+      spinnerPositionStyle = 'bottom: 15px; left: 15px;';
+      break;
+    default:
+      spinnerPositionStyle = 'top: 15px; right: 15px;';
+      break;
+  }
 
   /**
    * CSS Styles for the NextTopLoader
@@ -85,6 +105,7 @@ PagesTopLoader.propTypes = {
   color: PropTypes.string,
   height: PropTypes.number,
   showSpinner: PropTypes.bool,
+  spinnerPosition: PropTypes.string,
   crawl: PropTypes.bool,
   crawlSpeed: PropTypes.number,
   initialPosition: PropTypes.number,