Scrim
Calcite Scrims are used to easily apply loading visualizations on top of specific sections of content.
Overview
Scrims are a basic overlay that you can put on top of content to show disabled or loading states. Light and dark modes have their own distinct overlay color, and a prop can place Loader in the center for convenience.
Usage
- Disable an area of the interface
- Show loading of an area of the interface
Sample
Edit sample on Codepen
API reference
calcite-scrim
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| intlLoading | intl-loading | string to override English loading text | "Loading" (default) | |
| loading | loading | Determines if the component will have the loader overlay. Otherwise, will render opaque disabled state. | truefalse |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding custom content, primarily loading information. |