40 lines
739 B
TypeScript
40 lines
739 B
TypeScript
import type { ReactNode } from "react";
|
|
|
|
export function BeamBar({
|
|
className = "",
|
|
width = 140,
|
|
height = 4,
|
|
}: {
|
|
className?: string;
|
|
width?: number | string;
|
|
height?: number;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`tn-beam-bar ${className}`}
|
|
style={{ width, height }}
|
|
role="progressbar"
|
|
aria-label="加载中"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function BeamLoading({
|
|
text,
|
|
className = "",
|
|
width,
|
|
}: {
|
|
text?: ReactNode;
|
|
className?: string;
|
|
width?: number | string;
|
|
}) {
|
|
return (
|
|
<div className={`tn-beam-loading ${className}`} role="status" aria-live="polite">
|
|
<BeamBar width={width} />
|
|
{text && <span className="tn-beam-text">{text}</span>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BeamLoading;
|