You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
9.2 KiB
162 lines
9.2 KiB
---
|
|
layout : 'default'
|
|
css : 'loader'
|
|
|
|
element : 'loader'
|
|
elementType : 'element'
|
|
|
|
title : 'Loader'
|
|
description : 'A loader alerts a user to wait for an activity to complete'
|
|
type : 'UI Element'
|
|
|
|
themes : ['Default']
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
<div class="example">
|
|
<h4 class="ui header">Loader</h4>
|
|
<p>A loader</p>
|
|
<div class="ui ignored info message">A standard loader uses images, this ensures maximum compatability with other components.</div>
|
|
<div class="ui ignored info message">Loaders by default are hidden unless inside of a dimmer.</div>
|
|
<div class="ui segment">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<div class="ui active dimmer">
|
|
<div class="ui loader"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="ui header">CSS Loaders</h3>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Flipping Loader</h4>
|
|
<p>A loader can animate by flipping</p>
|
|
<div class="ui segment">
|
|
<div class="ui active dimmer">
|
|
<div class="ui flipping loader">
|
|
<div class="shape"></div>
|
|
Loading
|
|
</div>
|
|
</div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui segment">
|
|
<div class="ui active dimmer">
|
|
<div class="ui flipping circular loader">
|
|
<div class="shape"></div>
|
|
Loading
|
|
</div>
|
|
</div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Text Loader</h4>
|
|
<p>A loader can contain text</p>
|
|
<div class="ui segment">
|
|
<div class="ui active dimmer">
|
|
<div class="ui text loader">Loading</div>
|
|
</div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui segment">
|
|
<div class="ui active inverted dimmer">
|
|
<div class="ui text loader">Loading</div>
|
|
</div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2 class="ui dividing header">States</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Active</h4>
|
|
<p>A loader can be active or visible</p>
|
|
<div class="ui segment">
|
|
<div class="ui active loader"></div>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Disabled</h4>
|
|
<p>A loader can be disabled or hidden</p>
|
|
<div class="ui segment">
|
|
<div class="ui disabled loader"></div>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Inline</h4>
|
|
<p>Loaders can appear inline with content </p>
|
|
<div class="ui active inline loader"></div>
|
|
</div>
|
|
<div class="example">
|
|
<h4 class="ui header">Size</h4>
|
|
<p>Loaders can have different sizes</p>
|
|
|
|
<div class="ui segment">
|
|
<div class="ui active dimmer"><div class="ui mini text loader">Loading</div></div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="ui segment">
|
|
<div class="ui active dimmer"><div class="ui small text loader">Loading</div></div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="ui segment">
|
|
<div class="ui active dimmer"><div class="ui medium text loader">Loading</div></div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="ui segment">
|
|
<div class="ui active dimmer"><div class="ui large text loader">Loading</div></div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Inverted</h4>
|
|
<p>Loaders can have their colors inverted.</p>
|
|
<div class="ui ignored info message">Loaders will automatically be inverted inside dimmers to maintain consistency</div>
|
|
<div class="ui segment">
|
|
<div class="ui active dimmer"><div class="ui mini inverted text loader">Loading</div></div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="ui segment">
|
|
<div class="ui active dimmer"><div class="ui small inverted text loader">Loading</div></div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="ui segment">
|
|
<div class="ui active dimmer"><div class="ui medium inverted text loader">Loading</div></div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
<div class="ui segment">
|
|
<div class="ui active dimmer"><div class="ui large inverted text loader">Loading</div></div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|