import React from 'react' ; import 'hds-core' ; import styles from './LoadingSpinner.module.scss' ; import classNames from '../../utils/classNames' ; import { useTheme } from '../../hooks/useTheme' ; import { useNotificationArea } from './useNotificationArea' ; export interface LoadingSpinnerCustomTheme { '--spinner-color' ? : string ; '--spinner-color-stage1' ? : string ; '--spinner-color-stage2' ? : string ; '--spinner-color-stage3' ? : string ; } export type LoadingSpinnerProps = { /**
     * Additional class names for loading spinner.
     */ className ? : string ; default multicolor ? : boolean ; default small ? : boolean ; /**
     * Custom theme
     */ theme ? : LoadingSpinnerCustomTheme ; default loadingText ? : string ; default loadingFinishedText ? : string ; /**
     * Value for aria-valuenow attribute. Required unless the loading status is indeterminate.
     */ valuenow ? : number ; } & React . HTMLProps < HTMLDivElement > ; export const LoadingSpinner = ( { className , multicolor = false , small = false , theme , loadingText = 'Page is loading' , loadingFinishedText = 'Page has finished loading' , ... rest } ) => { const customThemeClass = useTheme < LoadingSpinnerCustomTheme > ( styles . loadingSpinner , theme ) ; useNotificationArea ( loadingText , loadingFinishedText ) ; return ( < div className = { classNames ( styles . loadingSpinner , small && styles . small , multicolor && styles . multicolor , customThemeClass , className ) } { ... rest } > < div /> < div / > < div /> < /div>); } ;