How to add text after Spinner ?

[gowthamdev]

I'm trying to add text to the Spinner component please let me know if any one of you know ?

[gowthamdev]

const LoadingSpinner = () => (

Processing...!!!

)

I tried Text inside the spinner component and its not working

[codeaid]

Just wrap it in a custom component that displays the spinner and text below it.

This component is a spinner, it's not a loading progress component with optional text below it. Text styling is individual to every project so it would be rather difficult and pointless to add support for it.

An example:

import * as React from 'react';
import * as Spinner from 'react-spinkit';
import './styles.css';

interface ILoaderProps {
    text?: string;
}

export class PageLoader extends React.Component<ILoaderProps, {}> {
    // default component properties
    public static defaultProps: Partial<ILoaderProps> = {
        text: '',
    };

    /**
     * Render the element
     *
     * @return {JSX.Element}
     */
    public render(): JSX.Element {
        let {text} = this.props;

        return (
            <div className="loader">
                <div className="loader-content">
                    <Spinner name="wandering-cubes" />
                    <div className="loader-message">{text}</div>
                </div>
            </div>
        );
    }
}

styles.css

.loader {
    background-color: #ffffff;
    bottom: 0;
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
}

.loader,
.loader-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-message {
    font-size: 0.9em;
    margin-top: 1em;
} 

Something along these lines...

[preeti-brovitech]

helpful!! thankyou