@alicloud/console-components/build/esm/rc/progress/demos/demo2.js

Alibaba Cloud React Components

/**
 * title: "环形状态"
 * description: "通过设置shape属性为circle，设置成环形样式。"
 */
import React from 'react';
import { Progress } from '@alicloud/console-components';
var h2Style = {
    fontSize: '12px',
    lineHeight: '22px',
    marginTop: '24px',
};
var containerStyle = {
    display: 'flex',
    gap: '10px',
};
export default (function () {
    return (React.createElement("div", { style: { display: 'flex' } },
        React.createElement("div", { style: { flex: 1 } },
            React.createElement("div", { style: h2Style }, "\u9ED8\u8BA4"),
            React.createElement("div", { style: containerStyle },
                React.createElement(Progress, { shape: "circle", percent: 80, state: "normal" }),
                React.createElement(Progress, { shape: "circle", percent: 60, state: "success" }),
                React.createElement(Progress, { shape: "circle", percent: 40, state: "error" }))),
        React.createElement("div", { style: { flex: 1 } },
            React.createElement("div", { style: h2Style }, "\u5C0F\u53F7"),
            React.createElement("div", { style: containerStyle },
                React.createElement(Progress, { shape: "circle", percent: 80, state: "normal", size: "small" }),
                React.createElement(Progress, { shape: "circle", percent: 60, state: "success", size: "small" }),
                React.createElement(Progress, { shape: "circle", percent: 40, state: "error", size: "small" })))));
});