@carbon/react/lib/components/Loading/Loading.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_deprecate = require("../../prop-types/deprecate.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/Loading/Loading.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
function Loading({ active = true, className: customClassName, withOverlay = true, small = false, description = "loading", ...rest }) {
	const prefix = require_usePrefix.usePrefix();
	const loadingClassName = (0, classnames.default)(customClassName, {
		[`${prefix}--loading`]: true,
		[`${prefix}--loading--small`]: small,
		[`${prefix}--loading--stop`]: !active
	});
	const overlayClassName = (0, classnames.default)({
		[`${prefix}--loading-overlay`]: true,
		[`${prefix}--loading-overlay--stop`]: !active
	});
	const loading = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		...rest,
		"aria-atomic": "true",
		"aria-live": active ? "assertive" : "off",
		className: loadingClassName,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
			className: `${prefix}--loading__svg`,
			viewBox: "0 0 100 100",
			role: "img",
			"aria-label": description,
			children: [
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: description }),
				small ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
					className: `${prefix}--loading__background`,
					cx: "50%",
					cy: "50%",
					r: "42"
				}) : null,
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
					className: `${prefix}--loading__stroke`,
					cx: "50%",
					cy: "50%",
					r: small ? "42" : "44"
				})
			]
		})
	});
	return withOverlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		className: overlayClassName,
		children: loading
	}) : loading;
}
Loading.propTypes = {
	active: prop_types.default.bool,
	className: prop_types.default.string,
	description: prop_types.default.string,
	id: require_deprecate.deprecate(prop_types.default.string, `\nThe prop \`id\` is no longer needed.`),
	small: prop_types.default.bool,
	withOverlay: prop_types.default.bool
};
//#endregion
exports.default = Loading;