Loader Inline

Displays a small animated loader, shown inline with text. Use case: contextual loading animation.

Inline loader

Example

<span>some text on top</span>
<div>before <span id="loader-inline"></span> Some text after</div>
<div>some text under loader</div>

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

render(<Loader/>, document.getElementById('loader-inline'));

Inline loader with children

Example

<span id="loader-inline"></span>

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

render(<Loader>Loading...</Loader>, document.getElementById('loader-inline'));

Inline loader on black background

Example

<div class="container">
  <span>some text on top</span>
  <div>before <span id="loader-inline"></span> Some text after</div>
  <div>some text under loader</div>
</div>

body {
  background-color: #000;
}

:global(.container) {
  color: #fff;
}

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

render(<Loader theme={Loader.Theme.DARK} />, document.getElementById('loader-inline'));

Inline loader on custom background

Example

<div class="container">
  <span>some text on top</span>
  <div>before <span id="loader-inline"></span> Some text after</div>
  <div>some text under loader</div>
</div>

body {
  background-color: #E5F4FF;
}

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

render(<Loader className="loader" />, document.getElementById('loader-inline'));

Inline loader without React

Example

<div class="ring-loader-inline"></div>

import injectStyles from '@jetbrains/ring-ui/components/loader-inline/inject-styles';

injectStyles();