diff --git a/src/HolyProgress.ts b/src/HolyProgress.ts index dcd7920..fb43c9b 100644 --- a/src/HolyProgress.ts +++ b/src/HolyProgress.ts @@ -48,6 +48,12 @@ type HolyProgressProps = { * Default: false */ showSpinner?: boolean; + + /** + * Specifies the class attribute value. + * Default: undefined + */ + className?: string; }; type TransformStrategy = 'translate3d' | 'translate' | 'margin'; @@ -78,6 +84,7 @@ export class HolyProgress { zIndex: 2147483647, boxShadow: undefined, showSpinner: false, + className: undefined, }; this.settings = { ...defaultSettings, ...customSettings }; @@ -320,6 +327,11 @@ export class HolyProgress { this.bar.style.transform = 'translate3d(' + percentage + '%,0,0)'; this.bar.style.boxShadow = this.settings.boxShadow ?? ''; + if (this.settings.className) { + this.bar.className = this.settings.className; + this.bar.style.removeProperty('background'); + } + document.body.appendChild(progress); return progress; diff --git a/src/constants.ts b/src/constants.ts index bce7dac..1e028a7 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -6,4 +6,5 @@ export const DEFAULTS = { speed: 200, zIndex: 2147483647, showSpinner: false, + className: undefined, }; diff --git a/src/index.tsx b/src/index.tsx index 66b8607..8ba4aa2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -52,6 +52,12 @@ export interface HolyLoaderProps { * Default: false */ showSpinner?: boolean; + + /** + * Specifies the class attribute value. + * Default: undefined + */ + className?: string; } /** @@ -112,6 +118,7 @@ const HolyLoader = ({ zIndex = DEFAULTS.zIndex, boxShadow, showSpinner = DEFAULTS.showSpinner, + className = DEFAULTS.className, }: HolyLoaderProps): null => { React.useEffect(() => { let holyProgress: HolyProgress; @@ -189,6 +196,7 @@ const HolyLoader = ({ zIndex, boxShadow, showSpinner, + className, }); document.addEventListener('click', handleClick);