content logo

React Buttons:

React Button with Loading Animation

If your user wants to download a file and it may take some time to download this file or your user has registered and the process takes a while, it is better to inform him of this extension with an icon or animation. Like we did in this button. Clicking this button changes the title of the button and also the loading icon appears next to the title.

#

Free Loading React Button

#

HTML Loading Button Code

#

Simple Loading Button Animation

#

Animating React Button Code

<!-- This script got from frontendfreecode.com -->
 <div class="panel panel-default mt-4">
        <div class="panel-body">
            <div id="app"></div>
        </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
"use strict";
class ReactShow extends React.Component {
    componentWillUnmount() {
    }
    componentWillReceiveProps(nextprop) {
    }
    render() {
        if (!!this.props.show) {
            return React.cloneElement(this.props.children);
        }
        else {
            let style = {
                display: 'none'
            };
            return React.cloneElement(this.props.children, { style: style });
        }
    }
}
// message Component
class BtnMesage extends React.Component {
    render() {
        let NotWorking = (this.props.IsWorking == false);
        return (React.createElement(ReactShow, { show: NotWorking },
            React.createElement("span", null, this.props.children)));
    }
}
// Loading Message Component
class BtnLoadingMessage extends React.Component {
    render() {
        let NotWorking = (this.props.IsWorking == false);
        return (React.createElement(ReactShow, { show: this.props.IsWorking },
            React.createElement("span", null,
                this.props.children,
                React.createElement("i", { className: "fa fa-spinner fa-spin" }))));
    }
}
//Loading Button Component
class LoadingButton extends React.Component {
    getComponents(busy) {
        let children = this.props.children.map((item, index) => {
            return React.cloneElement(item, { IsWorking: busy, key: index });
        });
        return children;
    }
    render() {
        return (React.createElement("button", { type: this.props.type, className: this.props.buttonClass, disabled: this.props.IsWorking, onClick: this.props.OnClick }, this.getComponents(this.props.IsWorking)));
    }
}
//usage
class Application extends React.Component {
    componentWillMount() {
        this.setState({ gotBusy: false });
    }
    OnClick() {
        console.log('you clicked me', 'I am on parent');
        this.setState({
            gotBusy: true
        });
        let that = this;
        setTimeout(() => {
            that.setState({ gotBusy: false });
        }, 8000);
    }
    render() {
        return (React.createElement("div", { className: "container" },
            React.createElement("div", { className: "" }),
            React.createElement("div", { className: "col-md-2" },
                React.createElement(LoadingButton, { buttonClass: "btn btn-primary", type: "button", IsWorking: this.state.gotBusy, OnClick: () => this.OnClick() },
                    React.createElement(BtnMesage, null, "Update"),
                    React.createElement(BtnLoadingMessage, null, "Loading.."))),
            React.createElement("div", { className: "col-md-2" },
                React.createElement(LoadingButton, { buttonClass: "btn btn-danger", type: "button", IsWorking: this.state.gotBusy, OnClick: () => this.OnClick() },
                    React.createElement(BtnMesage, null,
                        React.createElement("i", { className: "fa fa-trash-o" })),
                    React.createElement(BtnLoadingMessage, null, "Deleting Stuff...")))));
    }
}
ReactDOM.render(React.createElement(Application, null), document.getElementById('app'));
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
</head>
<body>
 <div class="panel panel-default mt-4">
        <div class="panel-body">
            <div id="app"></div>
        </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
"use strict";
class ReactShow extends React.Component {
    componentWillUnmount() {
    }
    componentWillReceiveProps(nextprop) {
    }
    render() {
        if (!!this.props.show) {
            return React.cloneElement(this.props.children);
        }
        else {
            let style = {
                display: 'none'
            };
            return React.cloneElement(this.props.children, { style: style });
        }
    }
}
// message Component
class BtnMesage extends React.Component {
    render() {
        let NotWorking = (this.props.IsWorking == false);
        return (React.createElement(ReactShow, { show: NotWorking },
            React.createElement("span", null, this.props.children)));
    }
}
// Loading Message Component
class BtnLoadingMessage extends React.Component {
    render() {
        let NotWorking = (this.props.IsWorking == false);
        return (React.createElement(ReactShow, { show: this.props.IsWorking },
            React.createElement("span", null,
                this.props.children,
                React.createElement("i", { className: "fa fa-spinner fa-spin" }))));
    }
}
//Loading Button Component
class LoadingButton extends React.Component {
    getComponents(busy) {
        let children = this.props.children.map((item, index) => {
            return React.cloneElement(item, { IsWorking: busy, key: index });
        });
        return children;
    }
    render() {
        return (React.createElement("button", { type: this.props.type, className: this.props.buttonClass, disabled: this.props.IsWorking, onClick: this.props.OnClick }, this.getComponents(this.props.IsWorking)));
    }
}
//usage
class Application extends React.Component {
    componentWillMount() {
        this.setState({ gotBusy: false });
    }
    OnClick() {
        console.log('you clicked me', 'I am on parent');
        this.setState({
            gotBusy: true
        });
        let that = this;
        setTimeout(() => {
            that.setState({ gotBusy: false });
        }, 8000);
    }
    render() {
        return (React.createElement("div", { className: "container" },
            React.createElement("div", { className: "" }),
            React.createElement("div", { className: "col-md-2" },
                React.createElement(LoadingButton, { buttonClass: "btn btn-primary", type: "button", IsWorking: this.state.gotBusy, OnClick: () => this.OnClick() },
                    React.createElement(BtnMesage, null, "Update"),
                    React.createElement(BtnLoadingMessage, null, "Loading.."))),
            React.createElement("div", { className: "col-md-2" },
                React.createElement(LoadingButton, { buttonClass: "btn btn-danger", type: "button", IsWorking: this.state.gotBusy, OnClick: () => this.OnClick() },
                    React.createElement(BtnMesage, null,
                        React.createElement("i", { className: "fa fa-trash-o" })),
                    React.createElement(BtnLoadingMessage, null, "Deleting Stuff...")))));
    }
}
ReactDOM.render(React.createElement(Application, null), document.getElementById('app'));
</script>

</body>
</html>
Preview