|
|
/* * # Semantic Loader * http://github.com/quirkyinc/semantic * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * * Released: April 17 2013 */ /******************************* Loader *******************************/ /* Standard Size */ .ui.loader { display: none; position: absolute; top: 50%; left: 50%; margin: -16px 0px 0px -16px; z-index: 1000; } .ui.dimmer .loader { display: block; } /*------------------- Text --------------------*/ /* Text Styles */ .ui.loader.text { width: auto !important; height: auto !important; text-align: center; font-style: normal; margin-top: -28px; min-width: 32px; padding-top: 40px; font-size: 14px; } .ui.loader.text.mini { margin-top: -16px; min-width: 16px; padding-top: 20px; font-size: 11px; } .ui.loader.text.small { margin-top: -23px; min-width: 24px; padding-top: 32px; font-size: 13px; } .ui.loader.text.large { margin-top: -46px; min-width: 64px; padding-top: 80px; font-size: 16px; } /******************************* States *******************************/ .ui.loader.active, .ui.loader.visible { display: block; } .ui.loader.disabled, .ui.loader.hidden { display: none; } /******************************* Variations *******************************/ /*------------------- Inverted --------------------*/ .ui.dimmer .ui.text.loader, .ui.inverted.text.loader { color: rgba(0, 0, 0, 0.8); } /* Tiny Size */ .ui.dimmer .mini.ui.loader, .ui.inverted .mini.ui.loader { background-image: url(../images/loader-mini-inverted.gif); } /* Small Size */ .ui.dimmer .small.ui.loader, .ui.inverted .small.ui.loader { background-image: url(../images/loader-small-inverted.gif); } /* Standard Size */ .ui.dimmer .ui.loader, .ui.inverted.loader { background-image: url(../images/loader-medium-inverted.gif); } /* Large Size */ .ui.dimmer .large.ui.loader, .ui.inverted .large.ui.loader { background-image: url(../images/loader-large-inverted.gif); } /*------------------- Sizes --------------------*/ /* Tiny Size */ .ui.inverted.dimmer .ui.loader.mini, .ui.loader.mini { width: 16px; height: 16px; background-image: url(../images/loader-mini.gif); margin: -8px 0px 0px -8px; } /* Small Size */ .ui.inverted.dimmer .ui.loader.small, .ui.loader.small { width: 24px; height: 24px; background-image: url(../images/loader-small.gif); margin: -12px 0px 0px -12px; } .ui.inverted.dimmer .ui.loader, .ui.loader { width: 32px; height: 32px; background: url(../images/loader-medium.gif) no-repeat; background-position: 48% 0px; } /* Large Size */ .ui.inverted.dimmer .ui.loader.large, .ui.loader.large { width: 64px; height: 64px; background-image: url(../images/loader-large.gif); margin: -32px 0px 0px -32px; } /*------------------- Inline --------------------*/ .ui.inline.loader { display: inline-block; vertical-align: middle; margin: 0em; }
|