Loading

Loading provides feedback about a process that is taking place in the application.

Usage

import { HvLoading } from "@hitachivantara/uikit-react-core";

Source

View Source Code

Package

@hitachivantara/uikit-react-core

label

small

color

<HvLoading label="Loading..." color="primary" />

<HvLoading label="Loading..." color="primary" />

Different colors

You can change the default color of the loader by passing a color name from the UI Kit color palette, a CSS color name or a hex color code.

<>
  <HvLoading color="positive" />
  <HvLoading color="cat2" />
  <HvLoading color="aquamarine" />
  <HvLoading color="#c73aa8" />
</>

<>
  <HvLoading color="positive" />
  <HvLoading color="cat2" />
  <HvLoading color="aquamarine" />
  <HvLoading color="#c73aa8" />
</>

Button loaders

You can use the loading component to create a button loader. Here is an example of a button that shows a loader when clicked.

import { useState } from "react";


export default function Demo() {
  const [isLoading, setIsLoading] = useState(false);


  const handleClick = async () => {
    await new Promise((resolve) => {
      setTimeout(resolve, 2000);
    });
  };


  return (
    <HvButton
      style={{ width: 120 }}
      onClick={async (event) => {
        setIsLoading(true);
        await handleClick();
        setIsLoading(false);
      }}
    >
      {!isLoading ? (
        "Submit"
      ) : (
        <HvLoading small hidden={!isLoading} color="inherit" />
      )}
    </HvButton>
  );
}

import { useState } from "react";

export default function Demo() {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = async () => {
    await new Promise((resolve) => {
      setTimeout(resolve, 2000);
    });
  };

  return (
    <HvButton
      style={{ width: 120 }}
      onClick={async (event) => {
        setIsLoading(true);
        await handleClick();
        setIsLoading(false);
      }}
    >
      {!isLoading ? (
        "Submit"
      ) : (
        <HvLoading small hidden={!isLoading} color="inherit" />
      )}
    </HvButton>
  );
}

CheckBox LoadingContainer

Loading

Different colors

Button loaders

Related components