[Loader] Centralised, Double+Elastic, other modules supported and dimmer option added

[lubber-de]

Description

This PR centralises the loader-element css code, adds new variations double and elastic of the loading animation and adds new loader options to dimmer

• loader animation keyframes centralised
• centralised color definition independent of the animation keyframes and shortened LESS code
• support for colors & speed also in the loading variants of dropdown,search,tab,segment,button,input and form
• new variant double which is basically the same as the usual loader, but has 2 colored parts of the circle
• new variant elastic. You know this common animation from everywhere 😉 It's also supported
  everywhere* in combination of any color or speed.

*Only form and segment do not support elastic because the :before pseudo-tag is used for dimming and i wanted to keep the code as short and compatible as possible to the common loader

Examples

Variant double

<div class="ui active large slow red double loader inline"></div>
<div class="ui active large slow brown double loader inline"></div>
<div class="ui active large slow violet double loader inline"></div>
<button class="ui inverted red slow double loading button">Loading</button>
<button class="ui primary slow loading double button">Loading</button>
<div class="ui left icon input blue slow double loading">
  <input type="text" placeholder="Search...">
  <i class="search icon"></i>
</div>
<div class="ui pink slow double loading dropdown">
  Dropdown <i class="dropdown icon"></i>
</div>

Variant elastic

<div class="ui active large purple elastic loader inline"></div>
<div class="ui active primary slow large loader inline elastic"></div>
<div class="ui active large fast black elastic loader inline"></div>
<button class="ui inverted fast green elastic loading button">Loading</button>
<button class="ui teal slow loading elastic button">Loading</button>
<div class="ui left icon input secondary elastic loading">
    <input type="text" placeholder="Search...">
    <i class="search icon"></i>
</div>
<div class="ui pink slow elastic loading dropdown">
    Dropdown <i class="dropdown icon"></i>
</div>

Usage in Form

<div class="ui teal slow double loading form"></div>

Usage in Dimmer

New Dimmer options

The dimmer has been enhanced to use the new features at runtime aswell. Three options were added

• loaderText -> Text to display underneath the Loader
• loaderVariation -> To add desired loader variation classes
• displayLoader -> If a loader should be displayed on the dimmer

$('#mydiv').dimmer({
            loaderText: 'New dimmer loader option ...',
            loaderVariation: 'slow orange massive elastic',
            displayLoader:true
        }).dimmer('show');

Usage in segment

As you already can specify a color to a segment to color its top border, by default an added loading class to a segment will automatically be displayed in the same color.

<div class="ui red segment loading"></div>

If you do not want this, then add usual to your loading definition and the loader inside the segment will be displayed as before

<div class="ui red segment usual loading"></div>

[y0hami]

LGTM

[y0hami]

@lubber-de These conflicts will need fixed 😉

[lubber-de]

@lubber-de These conflicts will need fixed

Solved the conflicts, it's mergeable into develop again

[ColinFrick]

LGTM