react-widget-spinner

安装

npm install --save react-widget-spinner

使用

import Spinner from 'react-widget-spinner';
import 'react-widget-spinner/style';

<Spinner />;

Interfaces

declare const sizeMap: {
    small: number;
    default: number;
    medium: number;
    large: number;
};
export interface SpinnerProps extends React.HTMLAttributes<any> {
    /** 样式前缀 */
    prefixCls?: string;
    /** 组件大小 */
    size?: keyof typeof sizeMap | number;
    /** TODO: 延迟显示加载效果的时间 ms */
    delay?: number;
    /** 圈圈周长：0-1 */
    value?: number;
    /** 风格，默认：primary */
    type?: "none" | "primary" | "success" | "warning" | "danger";
    /** 边框大小 */
    strokeWidth?: number;
    /** 是否为加载中状态 */
    spinning?: boolean;
    tagName?: React.ElementType;
}
export declare const Spinner: React.FC<SpinnerProps>;
export default Spinner;

defaultProps

{
	prefixCls: "rw-spinner",
	size: "default",
	type: "primary",
	spinning: true,
	tagName: "div",
	value: 0.25,
}

基础样式

@keyframes rw-spinner-animation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rw-spinner {
    display: none;
    align-items: center;
    justify-content: center;

    overflow: visible;
    vertical-align: middle;

    transition: color 500ms linear;
}

.rw-spinner-spinning {
    display: inline-flex;
}

.rw-spinner-primary {
    color: #1890ff;
}
.rw-spinner-success {
    color: #52c41a;
}
.rw-spinner-warning {
    color: #faad14;
}
.rw-spinner-danger {
    color: #ff4d4f;
}

.rw-spinner svg {
    display: block;
}

.rw-spinner path {
    fill-opacity: 0;
}

.rw-spinner-head {
    transform-origin: center;
    transition: stroke-dashoffset 200ms cubic-bezier(0.4, 1, 0.75, 0.9);
    stroke-linecap: round;
}

.rw-spinner-track {
    stroke: rgba(92, 112, 128, 0.2);
}

.rw-spinner .rw-spinner-animation {
    animation: rw-spinner-animation 500ms linear infinite;
}