<Loader /> Component

[levithomason]

http://semantic-ui.com/elements/loader.html

[layershifter]

API

Loader can be basic and with text.

<div class="ui loader"></div>
<div class="ui text loader">Loading</div>

<Loader />
<Loader text='Loading' />

Loader has following states: active, disabled and indeterminate.

<div class="ui active loader"></div>
<div class="ui disabled loader"></div>
<div class="ui indeterminate text loader">Preparing Files</div>

<Loader active />
<Loader disabled />
<Loader indeterminate text='Preparing Files' />

Loader has following variations: inline, centered inline, inverted and size.

<div class="ui active inline loader"></div>
<div class="ui active centered inline loader"></div>
<div class="ui active inverted loader"></div>
<div class="ui mini text loader">Loading</div>

<Loader active inline />
<Loader active centered inline />
<Loader active centered-inline />
<Loader size='mini' text='Loading' />

Did I miss any? 😄

[levithomason]

Woop! Nice job here, we're ready to start this one considering these comments:

Text

Let's also support mutuallyExclusive children. This will allow users to put more complicated markup in the loader:

<Loader>
  <p>Taking a while?</p>
  <Button size='mini' icon='refresh'>Reload</Button>
</Loader>

<div class="ui mini text loader">
  <p>Taking a while?</p>
  <button class="ui mini button">
    <i class="refresh icon" />
    Reload
  </button>
</div>

Note the presence of children should also add the text class.

Inline

The API for this one looks like this. Use the keyOrValueAndKey() propUtil in the cx buildup to extract the classes.

<Loader inline />
<Loader inline='centered' />

Size

Just clarifying it does not support big or massive sizes.

[layershifter]

Thanks for feedback 😄 I'll make PR soon

[layershifter]

It seems, issue may be closed 😄