/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    div: "div",
    pre: "pre",
    code: "code",
    span: "span"
  }, props.components);
  return _jsx(_components.div, {
    "data-rehype-pretty-code-fragment": "",
    children: _jsx(_components.pre, {
      className: "github-dark",
      style: {
        backgroundColor: "#24292e"
      },
      tabIndex: "0",
      "data-language": "tsx",
      "data-theme": "default",
      children: _jsxs(_components.code, {
        "data-language": "tsx",
        "data-theme": "default",
        style: {
          display: "grid"
        },
        children: [_jsxs(_components.span, {
          "data-line": "",
          children: [_jsx(_components.span, {
            style: {
              color: "#F97583"
            },
            children: "import"
          }), _jsx(_components.span, {
            style: {
              color: "#E1E4E8"
            },
            children: " LoadingOverlay "
          }), _jsx(_components.span, {
            style: {
              color: "#F97583"
            },
            children: "from"
          }), _jsx(_components.span, {
            style: {
              color: "#E1E4E8"
            },
            children: " "
          }), _jsx(_components.span, {
            style: {
              color: "#9ECBFF"
            },
            children: "\"~/core/ui/LoadingOverlay\""
          }), _jsx(_components.span, {
            style: {
              color: "#E1E4E8"
            },
            children: ";"
          })]
        }), "\n", _jsx(_components.span, {
          "data-line": "",
          children: " "
        }), "\n", _jsxs(_components.span, {
          "data-line": "",
          children: [_jsx(_components.span, {
            style: {
              color: "#E1E4E8"
            },
            children: "  <"
          }), _jsx(_components.span, {
            style: {
              color: "#79B8FF"
            },
            children: "LoadingOverlay"
          }), _jsx(_components.span, {
            style: {
              color: "#E1E4E8"
            },
            children: " "
          }), _jsx(_components.span, {
            style: {
              color: "#B392F0"
            },
            children: "displayLogo"
          }), _jsx(_components.span, {
            style: {
              color: "#F97583"
            },
            children: "="
          }), _jsx(_components.span, {
            style: {
              color: "#E1E4E8"
            },
            children: "{"
          }), _jsx(_components.span, {
            style: {
              color: "#79B8FF"
            },
            children: "false"
          }), _jsx(_components.span, {
            style: {
              color: "#E1E4E8"
            },
            children: "}>"
          })]
        }), "\n", _jsx(_components.span, {
          "data-line": "",
          children: _jsx(_components.span, {
            style: {
              color: "#E1E4E8"
            },
            children: "  We are loading your data... Please wait."
          })
        }), "\n", _jsxs(_components.span, {
          "data-line": "",
          children: [_jsx(_components.span, {
            style: {
              color: "#E1E4E8"
            },
            children: "  </"
          }), _jsx(_components.span, {
            style: {
              color: "#79B8FF"
            },
            children: "LoadingOverlay"
          }), _jsx(_components.span, {
            style: {
              color: "#E1E4E8"
            },
            children: ">"
          })]
        })]
      })
    })
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Loading Indicators - SaaS UI Kit

A collection of Loading Indicators components with Tailwind CSS

Basic Spinner Component

A basic spinner component with Tailwind CSS and Next.js

Page Loading Indicator Component

A page loading indicator component with Tailwind CSS and Next.js

Page Loading Indicator Component with Custom Text

A page loading indicator component with custom text with Tailwind CSS and Next.js