/* * # Semantic UI * https://github.com/Semantic-Org/Semantic-UI * http://www.semantic-ui.com/ * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Loader
*******************************/
/* Standard Size */ .ui.loader {
display: none; position: absolute; top: 50%; left: 50%; margin: 0px; text-align: center; z-index: 1000; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
/* Static Shape */ .ui.loader:before {
position: absolute; content: ''; top: 0%; left: 50%; width: 100%; height: 100%; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1);
}
/* Active Shape */ .ui.loader:after {
position: absolute; content: ''; top: 0%; left: 50%; width: 100%; height: 100%; -webkit-animation: loader 0.6s linear; animation: loader 0.6s linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; border-radius: 500rem; border-color: #aaaaaa transparent transparent; border-style: solid; border-width: 0.2em; box-shadow: 0px 0px 0px 1px transparent;
}
/* Active Animation */ @-webkit-keyframes loader {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
} @keyframes loader {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/* Sizes */ .ui.loader:before, .ui.loader:after {
width: 2.2585em; height: 2.2585em; margin: 0em 0em 0em -1.12925em;
} .ui.mini.loader:before, .ui.mini.loader:after {
width: 1.2857em; height: 1.2857em; margin: 0em 0em 0em -0.64285em;
} .ui.small.loader:before, .ui.small.loader:after {
width: 1.7142em; height: 1.7142em; margin: 0em 0em 0em -0.8571em;
} .ui.large.loader:before, .ui.large.loader:after {
width: 4.5714em; height: 4.5714em; margin: 0em 0em 0em -2.2857em;
}
/*——————-
Coupling
——————–*/
/* Show inside active dimmer */ .ui.dimmer .loader {
display: block;
}
/* Black Dimmer */ .ui.dimmer .ui.loader {
color: #ffffff;
} .ui.dimmer .ui.loader:before {
border-color: rgba(255, 255, 255, 0.15);
} .ui.dimmer .ui.loader:after {
border-color: #ffffff transparent transparent;
}
/* White Dimmer (Inverted) */ .ui.inverted.dimmer .ui.loader {
color: rgba(0, 0, 0, 0.8);
} .ui.inverted.dimmer .ui.loader:before {
border-color: rgba(0, 0, 0, 0.1);
} .ui.inverted.dimmer .ui.loader:after {
border-color: #aaaaaa transparent transparent;
}
/*******************************
Types
*******************************/
/*——————-
Text
——————–*/
.ui.text.loader {
width: auto !important; height: auto !important; text-align: center; font-style: normal;
}
/*******************************
States
*******************************/
.ui.indeterminate.loader:after {
-webkit-animation-direction: reverse; animation-direction: reverse; -webkit-animation-duration: 1.2s; animation-duration: 1.2s;
} .ui.loader.active, .ui.loader.visible {
display: block;
} .ui.loader.disabled, .ui.loader.hidden {
display: none;
}
/*******************************
Variations
*******************************/
/*——————-
Sizes
——————–*/
/* Loader */ .ui.inverted.dimmer .ui.mini.loader, .ui.mini.loader {
width: 1.2857em; height: 1.2857em; font-size: 0.7857em;
} .ui.inverted.dimmer .ui.small.loader, .ui.small.loader {
width: 1.7142em; height: 1.7142em; font-size: 0.9285em;
} .ui.inverted.dimmer .ui.loader, .ui.loader {
width: 2.2585em; height: 2.2585em; font-size: 1em;
} .ui.inverted.dimmer .ui.loader.large, .ui.loader.large {
width: 4.5714em; height: 4.5714em; font-size: 1.1428em;
}
/* Text Loader */ .ui.mini.text.loader {
min-width: 1.2857em; padding-top: 1.9857em;
} .ui.small.text.loader {
min-width: 1.7142em; padding-top: 2.4142em;
} .ui.text.loader {
min-width: 2.2585em; padding-top: 2.9585em;
} .ui.large.text.loader {
min-width: 4.5714em; padding-top: 5.2714em;
}
/*——————-
Inverted
——————–*/
.ui.inverted.loader {
color: #ffffff;
} .ui.inverted.loader:before {
border-color: rgba(255, 255, 255, 0.15);
} .ui.inverted.loader:after {
border-top-color: #ffffff;
}
/*——————-
Inline
——————–*/
.ui.inline.loader {
position: relative; vertical-align: middle; margin: 0em; left: 0em; top: 0em; -webkit-transform: none; -ms-transform: none; transform: none;
} .ui.inline.loader.active, .ui.inline.loader.visible {
display: inline-block;
}
/*******************************
Theme Overrides
*******************************/
/*******************************
Site Overrides
*******************************/