PrivateCoffee/wishthis
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
wishthis/semantic/dist/components/loader.css

876 lines
30 KiB
CSS
Raw Normal View History

Add fomantic ui
2022-01-13 13:00:31 +00:00
/*!
Fix downgrading FUI
2022-08-05 07:56:36 +00:00
* # Fomantic-UI 2.9.0-beta.301+42e68bc - Loader
Add fomantic ui
2022-01-13 13:00:31 +00:00
* http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Loader
*******************************/
/* Standard Size */
.ui.loader {
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
text-align: center;
z-index: 1000;
-webkit-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 infinite linear;
animation: loader 0.6s infinite linear;
border: 0.2em solid #767676;
border-radius: 500rem;
-webkit-box-shadow: 0 0 0 1px transparent;
box-shadow: 0 0 0 1px transparent;
}
/* Speeds */
.ui.fast.loading.loading:after,
.ui.fast.loading.loading .input > i.icon:after,
.ui.fast.loading.loading > i.icon:after,
.ui.fast.loader:after {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
}
.ui.slow.loading.loading:after,
.ui.slow.loading.loading .input > i.icon:after,
.ui.slow.loading.loading > i.icon:after,
.ui.slow.loader:after {
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
}
/* Active Animation */
@-webkit-keyframes loader {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*-------------------
Coupling
--------------------*/
/* Show inside active dimmer */
.ui.dimmer > .loader {
display: block;
}
/* Black Dimmer */
.ui.dimmer > .ui.loader {
color: rgba(255, 255, 255, 0.9);
}
.ui.dimmer > .ui.loader:not(.elastic):before {
border-color: rgba(255, 255, 255, 0.15);
}
/* White Dimmer (Inverted) */
.ui.inverted.dimmer > .ui.loader {
color: rgba(0, 0, 0, 0.87);
}
.ui.inverted.dimmer > .ui.loader:not(.elastic):before {
border-color: rgba(0, 0, 0, 0.1);
}
/*******************************
Types
*******************************/
/*-------------------
Text
--------------------*/
.ui.ui.ui.ui.text.loader {
width: auto;
height: auto;
text-align: center;
font-style: normal;
}
/*******************************
States
*******************************/
.ui.indeterminate.loader:after {
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
--------------------*/
.ui.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 2.66666667rem;
height: 2.66666667rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
font-size: 1em;
}
.ui.loader:before,
.ui.loader:after {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 2.66666667rem;
height: 2.66666667rem;
margin: 0 0 0 -1.33333333rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.text.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
min-width: 2.66666667rem;
padding-top: 3.41666667rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.mini.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 1.16666667rem;
height: 1.16666667rem;
font-size: 0.75em;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.mini.loader:before,
.ui.mini.loader:after {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 1.16666667rem;
height: 1.16666667rem;
margin: 0 0 0 -0.58333333rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.mini.text.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
min-width: 1.16666667rem;
padding-top: 1.91666667rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.tiny.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 1.33333333rem;
height: 1.33333333rem;
font-size: 0.83333333em;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.tiny.loader:before,
.ui.tiny.loader:after {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 1.33333333rem;
height: 1.33333333rem;
margin: 0 0 0 -0.66666667rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.tiny.text.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
min-width: 1.33333333rem;
padding-top: 2.08333333rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.small.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 2rem;
height: 2rem;
font-size: 0.91666667em;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.small.loader:before,
.ui.small.loader:after {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 2rem;
height: 2rem;
margin: 0 0 0 -1rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.small.text.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
min-width: 2rem;
padding-top: 2.75rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.large.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 4rem;
height: 4rem;
font-size: 1.16666667em;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.large.loader:before,
.ui.large.loader:after {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 4rem;
height: 4rem;
margin: 0 0 0 -2rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.large.text.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
min-width: 4rem;
padding-top: 4.75rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.big.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 4.33333333rem;
height: 4.33333333rem;
font-size: 1.25em;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.big.loader:before,
.ui.big.loader:after {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 4.33333333rem;
height: 4.33333333rem;
margin: 0 0 0 -2.16666667rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.big.text.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
min-width: 4.33333333rem;
padding-top: 5.08333333rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.huge.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 4.83333333rem;
height: 4.83333333rem;
font-size: 1.41666667em;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.huge.loader:before,
.ui.huge.loader:after {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 4.83333333rem;
height: 4.83333333rem;
margin: 0 0 0 -2.41666667rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.huge.text.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
min-width: 4.83333333rem;
padding-top: 5.58333333rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.massive.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 5.33333333rem;
height: 5.33333333rem;
font-size: 1.75em;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.massive.loader:before,
.ui.massive.loader:after {
Improve default theme
2022-01-13 13:27:51 +00:00
width: 5.33333333rem;
height: 5.33333333rem;
margin: 0 0 0 -2.66666667rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.massive.text.loader {
Improve default theme
2022-01-13 13:27:51 +00:00
min-width: 5.33333333rem;
padding-top: 6.08333333rem;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
/*-------------------
Colors
--------------------*/
.ui.primary.elastic.loader.loader:before,
.ui.primary.basic.elastic.loading.button:before,
.ui.primary.basic.elastic.loading.button:after,
.ui.primary.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.primary.elastic.loading.loading.loading .input > i.icon:before,
.ui.primary.elastic.loading.loading.loading.loading > i.icon:before,
.ui.primary.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.primary.loading.loading.loading.loading .input > i.icon:after,
.ui.primary.loading.loading.loading.loading > i.icon:after,
.ui.primary.loader.loader.loader:after {
Improve default theme
2022-01-13 13:27:51 +00:00
color: #6435C9;
Add fomantic ui
2022-01-13 13:00:31 +00:00
}
.ui.inverted.primary.elastic.loader:before,
.ui.inverted.primary.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.primary.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.primary.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.primary.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.primary.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.primary.loading.loading.loading.loading > i.icon:after,
.ui.inverted.primary.loader.loader.loader:after {
color: #54C8FF;
}
.ui.secondary.elastic.loader.loader:before,
.ui.secondary.basic.elastic.loading.button:before,
.ui.secondary.basic.elastic.loading.button:after,
.ui.secondary.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.secondary.elastic.loading.loading.loading .input > i.icon:before,
.ui.secondary.elastic.loading.loading.loading.loading > i.icon:before,
.ui.secondary.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.secondary.loading.loading.loading.loading .input > i.icon:after,
.ui.secondary.loading.loading.loading.loading > i.icon:after,
.ui.secondary.loader.loader.loader:after {
color: #1B1C1D;
}
.ui.inverted.secondary.elastic.loader:before,
.ui.inverted.secondary.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.secondary.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.secondary.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.secondary.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.secondary.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.secondary.loading.loading.loading.loading > i.icon:after,
.ui.inverted.secondary.loader.loader.loader:after {
color: #545454;
}
.ui.red.elastic.loader.loader:before,
.ui.red.basic.elastic.loading.button:before,
.ui.red.basic.elastic.loading.button:after,
.ui.red.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.red.elastic.loading.loading.loading .input > i.icon:before,
.ui.red.elastic.loading.loading.loading.loading > i.icon:before,
.ui.red.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.red.loading.loading.loading.loading .input > i.icon:after,
.ui.red.loading.loading.loading.loading > i.icon:after,
.ui.red.loader.loader.loader:after {
color: #DB2828;
}
.ui.inverted.red.elastic.loader:before,
.ui.inverted.red.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.red.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.red.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.red.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.red.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.red.loading.loading.loading.loading > i.icon:after,
.ui.inverted.red.loader.loader.loader:after {
color: #FF695E;
}
.ui.orange.elastic.loader.loader:before,
.ui.orange.basic.elastic.loading.button:before,
.ui.orange.basic.elastic.loading.button:after,
.ui.orange.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.orange.elastic.loading.loading.loading .input > i.icon:before,
.ui.orange.elastic.loading.loading.loading.loading > i.icon:before,
.ui.orange.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.orange.loading.loading.loading.loading .input > i.icon:after,
.ui.orange.loading.loading.loading.loading > i.icon:after,
.ui.orange.loader.loader.loader:after {
color: #F2711C;
}
.ui.inverted.orange.elastic.loader:before,
.ui.inverted.orange.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.orange.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.orange.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.orange.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.orange.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.orange.loading.loading.loading.loading > i.icon:after,
.ui.inverted.orange.loader.loader.loader:after {
color: #FF851B;
}
.ui.yellow.elastic.loader.loader:before,
.ui.yellow.basic.elastic.loading.button:before,
.ui.yellow.basic.elastic.loading.button:after,
.ui.yellow.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.yellow.elastic.loading.loading.loading .input > i.icon:before,
.ui.yellow.elastic.loading.loading.loading.loading > i.icon:before,
.ui.yellow.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.yellow.loading.loading.loading.loading .input > i.icon:after,
.ui.yellow.loading.loading.loading.loading > i.icon:after,
.ui.yellow.loader.loader.loader:after {
color: #FBBD08;
}
.ui.inverted.yellow.elastic.loader:before,
.ui.inverted.yellow.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.yellow.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.yellow.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.yellow.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.yellow.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.yellow.loading.loading.loading.loading > i.icon:after,
.ui.inverted.yellow.loader.loader.loader:after {
color: #FFE21F;
}
.ui.olive.elastic.loader.loader:before,
.ui.olive.basic.elastic.loading.button:before,
.ui.olive.basic.elastic.loading.button:after,
.ui.olive.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.olive.elastic.loading.loading.loading .input > i.icon:before,
.ui.olive.elastic.loading.loading.loading.loading > i.icon:before,
.ui.olive.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.olive.loading.loading.loading.loading .input > i.icon:after,
.ui.olive.loading.loading.loading.loading > i.icon:after,
.ui.olive.loader.loader.loader:after {
color: #B5CC18;
}
.ui.inverted.olive.elastic.loader:before,
.ui.inverted.olive.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.olive.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.olive.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.olive.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.olive.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.olive.loading.loading.loading.loading > i.icon:after,
.ui.inverted.olive.loader.loader.loader:after {
color: #D9E778;
}
.ui.green.elastic.loader.loader:before,
.ui.green.basic.elastic.loading.button:before,
.ui.green.basic.elastic.loading.button:after,
.ui.green.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.green.elastic.loading.loading.loading .input > i.icon:before,
.ui.green.elastic.loading.loading.loading.loading > i.icon:before,
.ui.green.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.green.loading.loading.loading.loading .input > i.icon:after,
.ui.green.loading.loading.loading.loading > i.icon:after,
.ui.green.loader.loader.loader:after {
color: #21BA45;
}
.ui.inverted.green.elastic.loader:before,
.ui.inverted.green.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.green.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.green.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.green.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.green.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.green.loading.loading.loading.loading > i.icon:after,
.ui.inverted.green.loader.loader.loader:after {
color: #2ECC40;
}
.ui.teal.elastic.loader.loader:before,
.ui.teal.basic.elastic.loading.button:before,
.ui.teal.basic.elastic.loading.button:after,
.ui.teal.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.teal.elastic.loading.loading.loading .input > i.icon:before,
.ui.teal.elastic.loading.loading.loading.loading > i.icon:before,
.ui.teal.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.teal.loading.loading.loading.loading .input > i.icon:after,
.ui.teal.loading.loading.loading.loading > i.icon:after,
.ui.teal.loader.loader.loader:after {
color: #00B5AD;
}
.ui.inverted.teal.elastic.loader:before,
.ui.inverted.teal.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.teal.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.teal.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.teal.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.teal.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.teal.loading.loading.loading.loading > i.icon:after,
.ui.inverted.teal.loader.loader.loader:after {
color: #6DFFFF;
}
.ui.blue.elastic.loader.loader:before,
.ui.blue.basic.elastic.loading.button:before,
.ui.blue.basic.elastic.loading.button:after,
.ui.blue.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.blue.elastic.loading.loading.loading .input > i.icon:before,
.ui.blue.elastic.loading.loading.loading.loading > i.icon:before,
.ui.blue.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.blue.loading.loading.loading.loading .input > i.icon:after,
.ui.blue.loading.loading.loading.loading > i.icon:after,
.ui.blue.loader.loader.loader:after {
color: #2185D0;
}
.ui.inverted.blue.elastic.loader:before,
.ui.inverted.blue.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.blue.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.blue.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.blue.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.blue.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.blue.loading.loading.loading.loading > i.icon:after,
.ui.inverted.blue.loader.loader.loader:after {
color: #54C8FF;
}
.ui.violet.elastic.loader.loader:before,
.ui.violet.basic.elastic.loading.button:before,
.ui.violet.basic.elastic.loading.button:after,
.ui.violet.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.violet.elastic.loading.loading.loading .input > i.icon:before,
.ui.violet.elastic.loading.loading.loading.loading > i.icon:before,
.ui.violet.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.violet.loading.loading.loading.loading .input > i.icon:after,
.ui.violet.loading.loading.loading.loading > i.icon:after,
.ui.violet.loader.loader.loader:after {
color: #6435C9;
}
.ui.inverted.violet.elastic.loader:before,
.ui.inverted.violet.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.violet.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.violet.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.violet.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.violet.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.violet.loading.loading.loading.loading > i.icon:after,
.ui.inverted.violet.loader.loader.loader:after {
color: #A291FB;
}
.ui.purple.elastic.loader.loader:before,
.ui.purple.basic.elastic.loading.button:before,
.ui.purple.basic.elastic.loading.button:after,
.ui.purple.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.purple.elastic.loading.loading.loading .input > i.icon:before,
.ui.purple.elastic.loading.loading.loading.loading > i.icon:before,
.ui.purple.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.purple.loading.loading.loading.loading .input > i.icon:after,
.ui.purple.loading.loading.loading.loading > i.icon:after,
.ui.purple.loader.loader.loader:after {
color: #A333C8;
}
.ui.inverted.purple.elastic.loader:before,
.ui.inverted.purple.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.purple.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.purple.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.purple.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.purple.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.purple.loading.loading.loading.loading > i.icon:after,
.ui.inverted.purple.loader.loader.loader:after {
color: #DC73FF;
}
.ui.pink.elastic.loader.loader:before,
.ui.pink.basic.elastic.loading.button:before,
.ui.pink.basic.elastic.loading.button:after,
.ui.pink.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.pink.elastic.loading.loading.loading .input > i.icon:before,
.ui.pink.elastic.loading.loading.loading.loading > i.icon:before,
.ui.pink.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.pink.loading.loading.loading.loading .input > i.icon:after,
.ui.pink.loading.loading.loading.loading > i.icon:after,
.ui.pink.loader.loader.loader:after {
color: #E03997;
}
.ui.inverted.pink.elastic.loader:before,
.ui.inverted.pink.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.pink.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.pink.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.pink.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.pink.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.pink.loading.loading.loading.loading > i.icon:after,
.ui.inverted.pink.loader.loader.loader:after {
color: #FF8EDF;
}
.ui.brown.elastic.loader.loader:before,
.ui.brown.basic.elastic.loading.button:before,
.ui.brown.basic.elastic.loading.button:after,
.ui.brown.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.brown.elastic.loading.loading.loading .input > i.icon:before,
.ui.brown.elastic.loading.loading.loading.loading > i.icon:before,
.ui.brown.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.brown.loading.loading.loading.loading .input > i.icon:after,
.ui.brown.loading.loading.loading.loading > i.icon:after,
.ui.brown.loader.loader.loader:after {
color: #A5673F;
}
.ui.inverted.brown.elastic.loader:before,
.ui.inverted.brown.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.brown.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.brown.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.brown.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.brown.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.brown.loading.loading.loading.loading > i.icon:after,
.ui.inverted.brown.loader.loader.loader:after {
color: #D67C1C;
}
.ui.grey.elastic.loader.loader:before,
.ui.grey.basic.elastic.loading.button:before,
.ui.grey.basic.elastic.loading.button:after,
.ui.grey.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.grey.elastic.loading.loading.loading .input > i.icon:before,
.ui.grey.elastic.loading.loading.loading.loading > i.icon:before,
.ui.grey.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.grey.loading.loading.loading.loading .input > i.icon:after,
.ui.grey.loading.loading.loading.loading > i.icon:after,
.ui.grey.loader.loader.loader:after {
color: #767676;
}
.ui.inverted.grey.elastic.loader:before,
.ui.inverted.grey.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.grey.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.grey.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.grey.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.grey.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.grey.loading.loading.loading.loading > i.icon:after,
.ui.inverted.grey.loader.loader.loader:after {
color: #DCDDDE;
}
.ui.black.elastic.loader.loader:before,
.ui.black.basic.elastic.loading.button:before,
.ui.black.basic.elastic.loading.button:after,
.ui.black.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.black.elastic.loading.loading.loading .input > i.icon:before,
.ui.black.elastic.loading.loading.loading.loading > i.icon:before,
.ui.black.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.black.loading.loading.loading.loading .input > i.icon:after,
.ui.black.loading.loading.loading.loading > i.icon:after,
.ui.black.loader.loader.loader:after {
color: #1B1C1D;
}
.ui.inverted.black.elastic.loader:before,
.ui.inverted.black.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
.ui.inverted.black.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.black.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.black.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.black.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.black.loading.loading.loading.loading > i.icon:after,
.ui.inverted.black.loader.loader.loader:after {
color: #545454;
}
.ui.elastic.loader.loader:before,
.ui.elastic.loading.loading.loading:before,
.ui.elastic.loading.loading.loading .input > i.icon:before,
.ui.elastic.loading.loading.loading > i.icon:before,
.ui.loading.loading.loading.loading:not(.usual):after,
.ui.loading.loading.loading.loading .input > i.icon:after,
.ui.loading.loading.loading.loading > i.icon:after,
.ui.loader.loader.loader:after {
border-color: currentColor;
}
.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before {
color: #FFFFFF;
}
.ui.elastic.basic.loading.button:before,
.ui.elastic.basic.loading.button:after {
color: #767676;
}
.ui.double.loading.loading.loading.loading.button:after {
border-bottom-color: currentColor;
}
/*-------------------
Inline
--------------------*/
.ui.inline.loader {
position: relative;
vertical-align: middle;
margin: 0;
left: 0;
top: 0;
-webkit-transform: none;
transform: none;
}
.ui.inline.loader.active,
.ui.inline.loader.visible {
display: inline-block;
}
/* Centered Inline */
.ui.centered.inline.loader.active,
.ui.centered.inline.loader.visible {
display: block;
margin-left: auto;
margin-right: auto;
}
.ui.loading.loading.loading.loading.loading.loading:after,
.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after,
.ui.loading.loading.loading.loading.loading.loading > i.icon:after,
.ui.loader.loader.loader.loader.loader:after {
border-left-color: transparent;
border-right-color: transparent;
}
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after,
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after,
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after,
.ui.loader.loader.loader.loader.loader.loader:not(.double):after {
border-bottom-color: transparent;
}
.ui.loading.loading.loading.loading.loading.loading.card:after,
.ui.loading.loading.loading.loading.loading.loading.segments:after,
.ui.loading.loading.loading.loading.loading.loading.segment:after,
.ui.loading.loading.loading.loading.loading.loading.form:after {
border-left-color: rgba(0, 0, 0, 0.1);
border-right-color: rgba(0, 0, 0, 0.1);
}
.ui.loading.loading.loading.loading.loading.loading.card:not(.double):after,
.ui.loading.loading.loading.loading.loading.loading.segments:not(.double):after,
.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
border-bottom-color: rgba(0, 0, 0, 0.1);
}
/*-------------------
Elastic
--------------------*/
.ui.dimmer > .ui.elastic.loader {
color: #FFFFFF;
}
.ui.inverted.dimmer > .ui.elastic.loader {
color: #767676;
}
.ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
.ui.elastic.loading.loading .input > i.icon:after,
.ui.elastic.loading.loading > i.icon:after,
.ui.elastic.loader.loader:after {
-webkit-animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
.ui.elastic.loading.loading.loading .input > i.icon:before,
.ui.elastic.loading.loading.loading > i.icon:before,
.ui.elastic.loader.loader:before {
-webkit-animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
-moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
border-right-color: transparent;
}
.ui.elastic.inline.loader:empty {
-webkit-animation: loader 8s infinite linear;
animation: loader 8s infinite linear;
}
.ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
.ui.slow.elastic.loading.loading .input > i.icon:after,
.ui.slow.elastic.loading.loading > i.icon:after,
.ui.slow.elastic.loader.loader:after {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
.ui.slow.elastic.loading.loading.loading .input > i.icon:before,
.ui.slow.elastic.loading.loading.loading > i.icon:before,
.ui.slow.elastic.loader.loader:before {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
.ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
.ui.fast.elastic.loading.loading .input > i.icon:after,
.ui.fast.elastic.loading.loading > i.icon:after,
.ui.fast.elastic.loader.loader:after {
-webkit-animation-duration: 0.66s;
animation-duration: 0.66s;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
.ui.fast.elastic.loading.loading.loading .input > i.icon:before,
.ui.fast.elastic.loading.loading.loading > i.icon:before,
.ui.fast.elastic.loader.loader:before {
-webkit-animation-duration: 0.66s;
animation-duration: 0.66s;
}
@-webkit-keyframes elastic-loader {
0%,
1% {
border-left-color: transparent;
border-bottom-color: transparent;
}
1.1%,
50% {
border-left-color: inherit;
}
10%,
35.1% {
border-bottom-color: transparent;
}
10.1%,
35% {
border-bottom-color: inherit;
}
50.1% {
border-left-color: transparent;
}
100% {
border-left-color: transparent;
border-bottom-color: transparent;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes elastic-loader {
0%,
1% {
border-left-color: transparent;
border-bottom-color: transparent;
}
1.1%,
50% {
border-left-color: inherit;
}
10%,
35.1% {
border-bottom-color: transparent;
}
10.1%,
35% {
border-bottom-color: inherit;
}
50.1% {
border-left-color: transparent;
}
100% {
border-left-color: transparent;
border-bottom-color: transparent;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes currentcolor-elastic-loader {
0%,
1% {
border-left-color: transparent;
border-bottom-color: transparent;
}
1.1%,
50% {
border-left-color: currentColor;
}
10%,
35.1% {
border-bottom-color: transparent;
}
10.1%,
35% {
border-bottom-color: currentColor;
}
50.1% {
border-left-color: transparent;
}
100% {
border-left-color: transparent;
border-bottom-color: transparent;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes currentcolor-elastic-loader {
0%,
1% {
border-left-color: transparent;
border-bottom-color: transparent;
}
1.1%,
50% {
border-left-color: currentColor;
}
10%,
35.1% {
border-bottom-color: transparent;
}
10.1%,
35% {
border-bottom-color: currentColor;
}
50.1% {
border-left-color: transparent;
}
100% {
border-left-color: transparent;
border-bottom-color: transparent;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*******************************
Theme Overrides
*******************************/
/*******************************
Site Overrides
*******************************/
Reference in a new issue Copy permalink