🚧 This website is work in progress 👷
Components
Structure
InlineLoading
Published

InlineLoading

The inline loading component provides visual feedback that data is being processed.

Import statement

import { InlineLoading } from "@wfp/react"

Usage

Expand code

Editable Example

() => {
  const [loading, setLoading] = useState(true);
  return (
    <>
      {loading ? (
        <InlineLoading
          iconDescription="Active loading indicator"
          description="Loading data..."
          success={false}
          // onSuccess={onSuccess}
        />
      ) : (
        <div>The content after loading</div>
      )}
    </>
  );
};

Success state

Editable Example

() => {
  return (
    <InlineLoading
      description="Success message"
      success={true}
    />
  );
};

Error state

Editable Example

() => {
  return (
    <InlineLoading
      description="Error message"
      fail={true}
    />
  );
};

Getting component class reference

ES2015
import { InlineLoading } from "@wfp/react";

Instantiating

// `#my-inline-loading` is an element with `[data-inline-loading]` attribute
InlineLoading.create(document.getElementById("my-inline-loading"));

Static properties

NameTypeDescription
statesObjectThe loading states. Contains INACTIVE, ACTIVE and FINISHED properties.

Public Methods

NameParamsDescription
releaseDeletes the instance
setStatestate : stringSets the active/inactive/finished state
Example - Transitioning the loading spinner to the finished state
// `#my-inline-loading` is an element with `[data-inline-loading]` attribute
var inlineLoadingInstance = InlineLoading.create(
  document.getElementById("my-inline-loading")
);
inlineLoadingInstance.setState(InlineLoading.states.FINISHED);

Options

OptionDefault SelectorDescription
selectorInit[data-inline-loading]The CSS selector to find the inline loading components
selectorSpinner[data-inline-loading-spinner]The CSS selector to find the spinner
selectorFinished[data-inline-loading-finished]The CSS selector to find the "finished" icon
selectorTextActive[data-inline-loading-text-active]The CSS selector to find the text describing the active state
selectorTextFinished[data-inline-loading-text-finished]The CSS selector to find the text describing the finished state
classLoadingStop.wfp--loading--stopThe CSS class for spinner's stopped state

On this page

References