feat: add boxShadow prop

Author: tomcru

README.md

@@ -109,5 +109,6 @@ Holy Loader accepts the following props for customization:
 - `easing` (string): Specifies the easing function to use for the loading animation. Accepts any valid CSS easing string. Default: "ease".
 - `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. Default: "none".
 
 Project inspired by [nextjs-toploader](https://github.com/TheSGJ/nextjs-toploader) & [nprogress](https://github.com/rstacruz/nprogress)

src/HolyProgress.ts

@@ -46,6 +46,12 @@ type HolyProgressProps = {
    * Default: 2147483647
    */
   zIndex: number;
+
+  /**
+   * Specifies the shadow effect to be applied to the progress bar.
+   * For example: "0 0 10px #59a2ff, 0 0 5px #59a2ff"
+   */
+  boxShadow?: string;
 };
 
 type TransformStrategy = 'translate3d' | 'translate' | 'margin';
@@ -76,6 +82,7 @@ export class HolyProgress {
       color: '#59a2ff',
       height: 4,
       zIndex: 2147483647,
+      boxShadow: undefined,
     };
 
     this.settings = { ...defaultSettings, ...customSettings };
@@ -320,6 +327,7 @@ export class HolyProgress {
     this.bar.style.left = '0';
     this.bar.style.transition = 'all 0 linear';
     this.bar.style.transform = 'translate3d(' + percentage + '%,0,0)';
+    this.bar.style.boxShadow = this.settings.boxShadow ?? '';
 
     document.body.appendChild(progress);
 

src/index.tsx

@@ -50,6 +50,12 @@ export interface HolyLoaderProps {
    * Default: 2147483647
    */
   zIndex?: number;
+
+  /**
+   * Specifies the shadow effect to be applied to the top-loading bar.
+   * For example: "0 0 10px #59a2ff, 0 0 5px #59a2ff"
+   */
+  boxShadow?: string;
 }
 
 /**
@@ -110,6 +116,7 @@ const HolyLoader = ({
   easing = DEFAULTS.easing,
   speed = DEFAULTS.speed,
   zIndex = DEFAULTS.zIndex,
+  boxShadow,
 }: HolyLoaderProps): JSX.Element => {
   React.useEffect(() => {
     let holyProgress: HolyProgress;
@@ -180,6 +187,7 @@ const HolyLoader = ({
         easing,
         speed,
         zIndex,
+        boxShadow,
       });
 
       document.addEventListener('click', handleClick);