Loader

Displays a large animated loader with an optional caption. Typical use cases: page loading animation, major action animation.

Loader

Example

<div id="loader1" class="loader-container"></div>
<div id="loader2" class="loader-container loader-container_black"></div>

import React from 'react';
import {render} from 'react-dom';
import Loader from '@jetbrains/ring-ui/components/loader/loader';

render(<Loader message="Loading..."/>, document.getElementById('loader1'));

render(<Loader message="Loading..."/>, document.getElementById('loader2'));

body {
   margin: 0;
}

:global(.loader-container) {
  padding: 32px;
}
:global(.loader-container_black) {
  background-color: black;
}

:global(.loader-container_black) {
  color: #FFF;
}