[Button] Add loading button

[Kimi-Gao]

Loading Button

Assign the loading attribute to a button to initialize a spinner.

Cases

• async function/api
• long time to be finished

Render

• Animation lasts about 3 seconds
• Click event will be invalid when button is loading

Code

@keyframes move-progress-bar {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 40px 40px
    }
}
:after {
    content: '';
    background-size: 40px 40px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(-45deg,hsla(198,20%,83%,.65) 25%,hsla(200,21%,92%,.65) 25%,hsla(200,21%,92%,.65) 50%,hsla(198,20%,83%,.65) 50%,hsla(198,20%,83%,.65) 75%,hsla(200,21%,92%,.65) 75%,hsla(200,21%,92%,.65));
    animation: move-progress-bar 1s linear infinite;
    margin: 10px
}

Usage

import Button from 'earth-ui/lib/Button';
import { useState } from 'react';

const LoadingButton = () => {
    const [loading, setLoading] = useState(false);
    return <Button type="primary" loading={loading} onClick={() => setLoading(true)} />;
}

Others

• test coverage > 90%