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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

API reference

calcite-scrim
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
intlLoadingintl-loading

string to override English loading text

optional
stringA custom string
"Loading" (default)
loadingloading

Determines if the component will have the loader overlay. Otherwise, will render opaque disabled state.

booleanA boolean property should be present, or not
truefalse

Slots

NameDescription
default (unnamed)

A slot for adding custom content, primarily loading information.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.