Loading Overlay

Loading covers a content area with a semi-transparent backdrop and centered loading indicator.

Basic Usage

Content underneath

import { Loading } from "@paramanu/feedback-react"

export default function App() {
return (
  <div style={{ position: "relative", height: 200 }}>
    <p>Content underneath</p>
    <Loading visible>Loading...</Loading>
  </div>
)
}

<div style="position: relative; height: 200px;">
<p>Content underneath</p>
<div class="pm-loading pm-loading--visible">
  <div class="pm-loading__backdrop"></div>
  <div class="pm-loading__content">Loading...</div>
</div>
</div>

With Blur

Content underneath

import { Loading } from "@paramanu/feedback-react"

export default function App() {
return (
  <div style={{ position: "relative", height: 200 }}>
    <p>Content underneath</p>
    <Loading visible blur>Loading...</Loading>
  </div>
)
}

<div style="position: relative; height: 200px;">
<p>Content underneath</p>
<div class="pm-loading pm-loading--visible pm-loading--blur">
  <div class="pm-loading__backdrop"></div>
  <div class="pm-loading__content">Loading...</div>
</div>
</div>

Accessibility

Uses aria-hidden to toggle visibility for assistive technology
Content inside the overlay should contain a loading indicator or text

Best Practices

Use on positioned containers (position: relative)
Toggle visible prop instead of mounting/unmounting for animations
Use blur effect sparingly to maintain performance

React Props

Prop	Type	Default	Description
`visible`	`boolean`	`false`	Show the overlay
`blur`	`boolean`	`false`	Apply blur to backdrop
`children`	`ReactNode`	—	Content centered in overlay