tdesign-react/esm/style/web/components/loading/_var.less

TDesign Component for React

// 组件变量
// 名称可按如下规则定义：
// <component>-[type]-[attrtype]-<attr>-[status]

// component:组件名，如button，
// type: 组件类型，如 button 的次要按钮（line）
// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
// attr: 属性名称，如color、height、radius等
// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等

// 如：@button-line-bg-color-hover
// 如：@button-line-height-s

//颜色
@loading-color: @brand-color;
@loading-mask-color: @mask-disabled;
@loading-gradient-color: @brand-color;

// 字号
@loading-text-size: @font-body-medium;
@loading-icon-size: @comp-size-l;
@loading-icon-size-small: @comp-size-xxxs;
@loading-icon-size-large: @comp-size-xxxl;
@loading-fullscreen-icon-size: @loading-icon-size;

// 间距
@loading-text-margin-left: @comp-margin-xs;
@loading-gradient-padding-s: 1px;
@loading-gradient-padding-m: 3px;
@loading-gradient-padding-l: 5px;

// Size
@loading-gradient-size-s: @comp-size-xxxs;
@loading-gradient-size-m: @comp-size-xl;
@loading-gradient-size-l: @comp-size-xxxl;

@loading-gradient-mask-size-s: 5.5px;
@loading-gradient-mask-size-m: 11.5px;
@loading-gradient-mask-size-l: 15.5px;