react-loading-ui

React loaing component.

Getting started

Install with NPM:

$ npm install react-loading-ui

Usage

Live Demo CodeSandbox

Set the default settings (optional).
To use, just call the Loading() function.

Note: The Loading() function toggle between hide and show. But instead of toggling, you can also use ShowLoading() and HideLoading()

import React, { Component } from 'react';
import { Loading } from 'react-loading-ui'

class App extends Component {

    saveForm() {

        /* Show loading-ui */
        Loading();

        fetch(url, requestOptions)
            .then((response) => {
                if (response.ok) {
                    return response.json();
                }

                /* Hide loading-ui */
                Loading();
            });

    }
    render() {
        return (
            <div>
                <button type="button" onClick={(e) => this.saveForm()}>Save Form</button>
            </div>
        )
    }

}

export default App;

Default Settings

You can set the component settings for your entire application or whenever you call Loading({settings}).

SetDefault({
    /* Loading title */
    title: "",
    /* Loading text */
    text: "",
    /* Show progress bar */
    progress: false,
    /* Close the loading when progress is over */
    progressedClose: false,
    /* Default theme [light|dark] */
    theme: "light",
    /* Top Bar Loading */
    topBar: false,
    /* Top Bar Loading */
    topBar: false,
    /* Top Bar Loading Color */
    topBarColor: '#2764B0',
});

Loading

Loading() and ShowLoading() preview with light color theme.

Progress

Loading({ progress: true }) and ShowLoading({ progress: true }) preview with light color theme.

With the Progress(progress) function you can ensure the loading progress, see the demo.

Hide Loading

If you want to force hiding, you can use HideLoading() function.

CSS Overrides

If you want to customize the styles, you can use the following classNames:

loading-ui-overlay
loading-ui-body
loading-ui-title
loading-ui-text
loading-ui-spinner
loading-ui-progress-bar

Author

Barış Ateş

License

TRA-Tech/react-loading-ui

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages