feat: add showSpinner prop

Author: tomcru

README.md

@@ -75,8 +75,9 @@ export default function RootLayout({ children }) {
       <HolyLoader
         color="#ff4500"
         height="1rem"
-        trickleSpeed={250}
+        speed={250}
         easing="linear"
+        showSpinner
       />
       {children}
     </html>
@@ -106,5 +107,6 @@ onClick={(e) => {
 - `speed` (number): Sets the animation speed of the top-loading bar in milliseconds. Default: 200 milliseconds.
 - `zIndex` (number): Defines the z-index property of the top-loading bar, controlling its stacking order. Default: 2147483647.
 - `boxShadow` (string): Sets the box-shadow property of the top-loading bar. Turned off by default.
+- `showSpinner` (boolean): Determines whether to accompany the loading bar with a spinner. Turned off by default.
 
 Project inspired by [nextjs-toploader](https://github.com/TheSGJ/nextjs-toploader) & [nprogress](https://github.com/rstacruz/nprogress)

src/HolyProgress.ts

@@ -1,3 +1,5 @@
+import { DEFAULTS } from './constants';
+
 type HolyProgressProps = {
   /**
    * Specifies the minimum value for the progress bar to start at.
@@ -40,6 +42,12 @@ type HolyProgressProps = {
    * For example: "0 0 10px #59a2ff, 0 0 5px #59a2ff"
    */
   boxShadow?: string;
+
+  /**
+   * Specifies whether to accompany the loading bar with a spinner.
+   * Default: false
+   */
+  showSpinner?: boolean;
 };
 
 type TransformStrategy = 'translate3d' | 'translate' | 'margin';
@@ -69,6 +77,7 @@ export class HolyProgress {
       height: 4,
       zIndex: 2147483647,
       boxShadow: undefined,
+      showSpinner: false,
     };
 
     this.settings = { ...defaultSettings, ...customSettings };
@@ -119,9 +128,10 @@ export class HolyProgress {
           progress.style.transition = 'all ' + speed + 'ms linear';
           progress.style.opacity = '0';
           setTimeout(() => {
-            this.remove();
+            this.removeBar();
             next();
           }, speed);
+          // this.removeSpinner();
         }, speed);
       } else {
         setTimeout(next, speed);
@@ -179,6 +189,7 @@ export class HolyProgress {
     }
 
     this.startTrickle();
+    this.createSpinner();
 
     return this;
   };
@@ -318,6 +329,47 @@ export class HolyProgress {
     return progress;
   };
 
+  /**
+   * Creates and initializes a new spinner element in the DOM.
+   * It sets up the necessary styles and appends the element to the document body.
+   * @private
+   * @returns {void}
+   */
+  private readonly createSpinner = (): void => {
+    const spinner = document.createElement('div');
+    spinner.id = 'holy-progress-spinner';
+    spinner.style.pointerEvents = 'none';
+
+    spinner.style.display = 'block';
+    spinner.style.position = 'fixed';
+    spinner.style.zIndex = this.settings.zIndex.toString();
+    spinner.style.top = '15px';
+    spinner.style.right = '15px';
+
+    spinner.style.width = '18px';
+    spinner.style.height = '18px';
+    spinner.style.boxSizing = 'border-box';
+
+    spinner.style.border = 'solid 2px transparent';
+    spinner.style.borderTopColor = DEFAULTS.color;
+    spinner.style.borderLeftColor = DEFAULTS.color;
+    spinner.style.borderRadius = '50%';
+    spinner.style.animation = 'holy-progress-spinner 400ms linear infinite';
+
+    const keyframes = `
+      @keyframes holy-progress-spinner {
+        0%   { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `;
+
+    const style = document.createElement('style');
+    style.innerHTML = keyframes;
+    spinner.appendChild(style);
+
+    document.body.appendChild(spinner);
+  };
+
   /**
    * Retrieves the existing progress bar element from the DOM, or creates a new one if not present.
    * @private
@@ -337,12 +389,22 @@ export class HolyProgress {
 
   /**
    * Removes the progress bar element from the DOM.
-   * This is typically called when the progress reaches 100% and is no longer needed.
    * @private
+   * @returns {void}
+   */
+  private readonly removeBar = (): void => {
+    const bar = document.getElementById('holy-progress');
+    bar !== null && bar.remove();
+  };
+
+  /**
+   * Removes the spinner element from the DOM.
+   * @private
+   * @returns {void}
    */
-  private readonly remove = (): void => {
-    const progress = document.getElementById('holy-progress');
-    progress !== null && progress.remove();
+  private readonly removeSpinner = (): void => {
+    const spinner = document.getElementById('holy-progress-spinner');
+    spinner !== null && spinner.remove();
   };
 
   /**

src/constants.ts

@@ -5,4 +5,5 @@ export const DEFAULTS = {
   easing: 'ease',
   speed: 200,
   zIndex: 2147483647,
+  showSpinner: false,
 };

src/index.tsx

@@ -46,6 +46,12 @@ export interface HolyLoaderProps {
    * For example: "0 0 10px #59a2ff, 0 0 5px #59a2ff"
    */
   boxShadow?: string;
+
+  /**
+   * Specifies whether to accompany the loading bar with a spinner.
+   * Default: false
+   */
+  showSpinner?: boolean;
 }
 
 /**
@@ -105,6 +111,7 @@ const HolyLoader = ({
   speed = DEFAULTS.speed,
   zIndex = DEFAULTS.zIndex,
   boxShadow,
+  showSpinner = DEFAULTS.showSpinner,
 }: HolyLoaderProps): null => {
   React.useEffect(() => {
     let holyProgress: HolyProgress;
@@ -174,6 +181,7 @@ const HolyLoader = ({
         speed,
         zIndex,
         boxShadow,
+        showSpinner,
       });
 
       document.addEventListener('click', handleClick);