diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index 126d2cbe46..c019301315 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -658,30 +658,15 @@ width: @loaderSize; height: @loaderSize; - animation: form-spin @loaderSpeed linear; - animation-iteration-count: infinite; - + animation: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid @loaderLineColor; border-radius: @circularRadius; - border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor; - border-style: solid; - border-width: @loaderLineWidth; - box-shadow: 0 0 0 1px transparent; visibility: visible; z-index: @loaderLineZIndex; } -@keyframes form-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - - /******************************* Element Types *******************************/ diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index eb53251c3f..c1474f2e2c 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -161,14 +161,11 @@ width: @loaderSize; height: @loaderSize; - animation: button-spin @loaderSpeed linear; - animation-iteration-count: infinite; - border-radius: @circularRadius; - border-color: @invertedLoaderLineColor transparent transparent; - border-style: solid; - border-width: @loaderLineWidth; + animation: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid currentColor; + color: @invertedLoaderLineColor; box-shadow: 0 0 0 1px transparent; } @@ -177,20 +174,11 @@ box-shadow: none; } -@keyframes button-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - .ui.basic.loading.button:not(.inverted):before { border-color: @loaderFillColor; } .ui.basic.loading.button:not(.inverted):after { - border-top-color: @loaderLineColor; + border-color: @loaderLineColor; } /*------------------- diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less index 6e7bc0cc3c..c19c241f64 100755 --- a/src/definitions/elements/input.less +++ b/src/definitions/elements/input.less @@ -130,15 +130,11 @@ width: @loaderSize; height: @loaderSize; - animation: button-spin @loaderSpeed linear; - animation-iteration-count: infinite; + animation: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid @loaderLineColor; border-radius: @circularRadius; - border-color: @loaderLineColor transparent transparent; - border-style: solid; - border-width: @loaderLineWidth; - box-shadow: 0 0 0 1px transparent; } diff --git a/src/definitions/elements/loader.less b/src/definitions/elements/loader.less index bc6716a7dc..a582001336 100755 --- a/src/definitions/elements/loader.less +++ b/src/definitions/elements/loader.less @@ -55,35 +55,32 @@ width: 100%; height: 100%; - animation: loader @loaderSpeed linear; - animation-iteration-count: infinite; - + animation: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid @shapeBorderColor; border-radius: @circularRadius; - border-color: @shapeBorderColor; - border-style: solid; - border-width: @loaderLineWidth; - 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 { - animation: loader @loaderSpeedFast linear; - animation-iteration-count: infinite; + animation-duration: @loaderSpeedFast; } +.ui.slow.loading.loading:after, +.ui.slow.loading.loading .input > i.icon:after, +.ui.slow.loading.loading > i.icon:after, .ui.slow.loader:after { - animation: loader @loaderSpeedSlow linear; - animation-iteration-count: infinite; + animation-duration: @loaderSpeedSlow; } /* Active Animation */ @keyframes loader { - from { - transform: rotate(0deg); - } - to { + 100% { transform: rotate(360deg); } } @@ -151,23 +148,17 @@ .ui.dimmer .ui.loader { color: @invertedLoaderTextColor; } -.ui.dimmer .ui.loader:before { +.ui.dimmer .ui.loader:not(.elastic):before { border-color: @invertedLoaderFillColor; } -.ui.dimmer .ui.loader:after { - border-color: @invertedShapeBorderColor; -} /* White Dimmer (Inverted) */ .ui.inverted.dimmer .ui.loader { color: @loaderTextColor; } -.ui.inverted.dimmer .ui.loader:before { +.ui.inverted.dimmer .ui.loader:not(.elastic):before { border-color: @loaderFillColor; } -.ui.inverted.dimmer .ui.loader:after { - border-color: @shapeBorderColor; -} /******************************* Types @@ -302,142 +293,63 @@ Colors --------------------*/ -.ui.primary.loader:after { - border-color: @primaryColor transparent transparent; -} - -.ui.secondary.loader:after { - border-color: @secondaryColor transparent transparent; -} - -.ui.red.loader:after { - border-color: @red transparent transparent; -} - -.ui.orange.loader:after { - border-color: @orange transparent transparent; -} - -.ui.yellow.loader:after { - border-color: @yellow transparent transparent; -} - -.ui.olive.loader:after { - border-color: @olive transparent transparent; -} - -.ui.green.loader:after { - border-color: @green transparent transparent; -} - -.ui.teal.loader:after { - border-color: @teal transparent transparent; -} - -.ui.blue.loader:after { - border-color: @blue transparent transparent; -} - -.ui.violet.loader:after { - border-color: @violet transparent transparent; -} - -.ui.purple.loader:after { - border-color: @purple transparent transparent; -} - -.ui.pink.loader:after { - border-color: @pink transparent transparent; -} - -.ui.brown.loader:after { - border-color: @brown transparent transparent; -} - -.ui.grey.loader:after { - border-color: @grey transparent transparent; -} - -.ui.black.loader:after { - border-color: @black transparent transparent; -} - - -/*------------------- - Inverted ---------------------*/ - -.ui.inverted.loader { - color: @invertedLoaderTextColor -} -.ui.inverted.loader:before { - border-color: @invertedLoaderFillColor; -} -.ui.inverted.loader:after { - border-top-color: @invertedLoaderLineColor; -} - -/* Colors */ -.ui.inverted.primary.loader:after { - border-color: @lightPrimaryColor transparent transparent; -} - -.ui.inverted.secondary.loader:after { - border-color: @lightSecondaryColor transparent transparent; -} - -.ui.inverted.red.loader:after { - border-color: @lightRed transparent transparent; -} - -.ui.inverted.orange.loader:after { - border-color: @lightOrange transparent transparent; -} - -.ui.inverted.yellow.loader:after { - border-color: @lightYellow transparent transparent; -} - -.ui.inverted.olive.loader:after { - border-color: @lightOlive transparent transparent; -} - -.ui.inverted.green.loader:after { - border-color: @lightGreen transparent transparent; -} - -.ui.inverted.teal.loader:after { - border-color: @lightTeal transparent transparent; -} - -.ui.inverted.blue.loader:after { - border-color: @lightBlue transparent transparent; -} - -.ui.inverted.violet.loader:after { - border-color: @lightViolet transparent transparent; -} - -.ui.inverted.purple.loader:after { - border-color: @lightPurple transparent transparent; -} - -.ui.inverted.pink.loader:after { - border-color: @lightPink transparent transparent; -} - -.ui.inverted.brown.loader:after { - border-color: @lightBrown transparent transparent; -} - -.ui.inverted.grey.loader:after { - border-color: @lightGrey transparent transparent; +.loaderColor(@colorRaw; @lightColor;) { + @color: replace(@colorRaw,'Color',''); + @_loaderColor: "@{colorRaw}"; + @_loaderInvertedColor: "@{lightColor}"; + + .ui.@{color}.elastic.loader.loader:before, + .ui.@{color}.elastic.loading.loading.loading:not(.segment):before, + .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before, + .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after, + .ui.@{color}.loading.loading.loading.loading .input > i.icon:after, + .ui.@{color}.loading.loading.loading.loading > i.icon:after, + .ui.@{color}.loader.loader.loader:after { + color: @@_loaderColor; + } + .ui.inverted.@{color}.elastic.loader:before, + .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):before, + .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before, + .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before, + .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after, + .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after, + .ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after, + .ui.inverted.@{color}.loader.loader.loader:after { + color: @@_loaderInvertedColor; + } } - -.ui.inverted.black.loader:after { - border-color: @lightBlack transparent transparent; +.loaderColor(~'primaryColor',~'lightPrimaryColor'); +.loaderColor(~'secondaryColor',~'lightSecondaryColor'); +.loaderColor(~'red',~'lightRed'); +.loaderColor(~'orange',~'lightOrange'); +.loaderColor(~'yellow',~'lightYellow'); +.loaderColor(~'olive',~'lightOlive'); +.loaderColor(~'green',~'lightGreen'); +.loaderColor(~'teal',~'lightTeal'); +.loaderColor(~'blue',~'lightBlue'); +.loaderColor(~'violet',~'lightViolet'); +.loaderColor(~'purple',~'lightPurple'); +.loaderColor(~'pink',~'lightPink'); +.loaderColor(~'brown',~'lightBrown'); +.loaderColor(~'grey',~'lightGrey'); +.loaderColor(~'black',~'lightBlack'); + +.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):before { + color: @white; +} +.ui.double.loading.loading.loading.loading.button:after { + border-bottom-color: currentColor; } - /*------------------- Inline --------------------*/ @@ -464,5 +376,104 @@ 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.segment:after, +.ui.loading.loading.loading.loading.loading.loading.form:after { + border-left-color:@loaderFillColor; + border-right-color:@loaderFillColor; +} +.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: @loaderFillColor; +} + +/*------------------- + Elastic +--------------------*/ + +.ui.dimmer .ui.elastic.loader { + color: @white; +} +.ui.inverted.dimmer .ui.elastic.loader { + color: @grey; +} +.ui.elastic.loading.loading:not(.form):not(.segment):after, +.ui.elastic.loading.loading .input > i.icon:after, +.ui.elastic.loading.loading > i.icon:after, +.ui.elastic.loader.loader:after { + animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61); + animation-delay: 0.3s; +} +.ui.elastic.loading.loading.loading:not(.form):not(.segment):before, +.ui.elastic.loading.loading.loading .input > i.icon:before, +.ui.elastic.loading.loading.loading > i.icon:before, +.ui.elastic.loader.loader:before { + animation: elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61); + border-right-color: transparent; +} +.ui.elastic.inline.loader:empty { + animation: loader 8s infinite linear; +} +.ui.slow.elastic.loading.loading:not(.form):not(.segment):after, +.ui.slow.elastic.loading.loading .input > i.icon:after, +.ui.slow.elastic.loading.loading > i.icon:after, +.ui.slow.elastic.loader.loader:after { + animation-duration: 1.5s; + animation-delay: 0.45s; +} +.ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):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 { + animation-duration: 1.5s; +} +.ui.fast.elastic.loading.loading:not(.form):not(.segment):after, +.ui.fast.elastic.loading.loading .input > i.icon:after, +.ui.fast.elastic.loading.loading > i.icon:after, +.ui.fast.elastic.loader.loader:after { + animation-duration: 0.66s; + animation-delay: 0.20s; +} +.ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):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 { + animation-duration: 0.66s; +} +@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; + transform: rotate(360deg); + } +} .loadUIOverrides(); diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index b476cf2e58..b9aa63e401 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -491,28 +491,15 @@ width: @loaderSize; height: @loaderSize; - animation: segment-spin @loaderSpeed linear; - animation-iteration-count: infinite; - + animation: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid @loaderLineColor; border-radius: @circularRadius; - border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor; - border-style: solid; - border-width: @loaderLineWidth; - box-shadow: 0 0 0 1px transparent; visibility: visible; z-index: @loaderLineZIndex; } -@keyframes segment-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} /******************************* diff --git a/src/definitions/modules/dimmer.js b/src/definitions/modules/dimmer.js index d2173253e2..6894d1e5bf 100755 --- a/src/definitions/modules/dimmer.js +++ b/src/definitions/modules/dimmer.js @@ -175,7 +175,7 @@ $.fn.dimmer = function(parameters) { create: function() { var - $element = $( settings.template.dimmer() ) + $element = $( settings.template.dimmer(settings) ) ; if(settings.dimmerName) { module.debug('Creating named dimmer', settings.dimmerName); @@ -701,6 +701,10 @@ $.fn.dimmer.settings = { show : 500, hide : 500 }, +// whether the dynamically created dimmer should have a loader + displayLoader: false, + loaderText : false, + loaderVariation : '', onChange : function(){}, onShow : function(){}, @@ -720,7 +724,8 @@ $.fn.dimmer.settings = { hide : 'hide', legacy : 'legacy', pageDimmer : 'page', - show : 'show' + show : 'show', + loader : 'ui loader' }, selector: { @@ -729,8 +734,19 @@ $.fn.dimmer.settings = { }, template: { - dimmer: function() { - return $('
').attr('class', 'ui dimmer'); + dimmer: function(settings) { + var d = $('
').addClass('ui dimmer'),l; + if(settings.displayLoader) { + l = $('
') + .addClass(settings.className.loader) + .addClass(settings.loaderVariation); + if(!!settings.loaderText){ + l.text(settings.loaderText); + l.addClass('text'); + } + d.append(l); + } + return d; } } diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index e55c504dfc..6de8e9a541 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -821,14 +821,10 @@ select.ui.dropdown { width: @loaderSize; height: @loaderSize; - animation: dropdown-spin @loaderSpeed linear; - animation-iteration-count: infinite; - + animation: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid @loaderLineColor; border-radius: @circularRadius; - border-color: @loaderLineColor transparent transparent; - border-style: solid; - border-width: @loaderLineWidth; } /* Coupling */ @@ -837,16 +833,6 @@ select.ui.dropdown { display: none; } -@keyframes dropdown-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - - /*-------------------- Default Text ----------------------*/ diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less index 7b4b306838..12ce0cbc7b 100755 --- a/src/definitions/modules/search.less +++ b/src/definitions/modules/search.less @@ -222,15 +222,10 @@ width: @loaderSize; height: @loaderSize; - animation: button-spin @loaderSpeed linear; - animation-iteration-count: infinite; - + animation: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid @loaderLineColor; border-radius: @circularRadius; - border-color: @loaderLineColor transparent transparent; - border-style: solid; - border-width: @loaderLineWidth; - box-shadow: 0 0 0 1px transparent; } diff --git a/src/definitions/modules/tab.less b/src/definitions/modules/tab.less index da187d834c..832f0a7f38 100755 --- a/src/definitions/modules/tab.less +++ b/src/definitions/modules/tab.less @@ -79,15 +79,10 @@ width: @loaderSize; height: @loaderSize; - animation: button-spin @loaderSpeed linear; - animation-iteration-count: infinite; - + animation: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid @loaderLineColor; border-radius: @circularRadius; - border-color: @loaderLineColor transparent transparent; - border-style: solid; - border-width: @loaderLineWidth; - box-shadow: 0 0 0 1px transparent; } diff --git a/src/themes/default/elements/loader.variables b/src/themes/default/elements/loader.variables index eb9dea4e37..5b2bf568fe 100644 --- a/src/themes/default/elements/loader.variables +++ b/src/themes/default/elements/loader.variables @@ -17,8 +17,8 @@ @loaderTopOffset: 50%; @loaderLeftOffset: 50%; -@shapeBorderColor: @loaderLineColor transparent transparent; -@invertedShapeBorderColor: @invertedLoaderLineColor transparent transparent; +@shapeBorderColor: @loaderLineColor; +@invertedShapeBorderColor: @invertedLoaderLineColor; /*------------------- Types diff --git a/src/themes/default/modules/tab.variables b/src/themes/default/modules/tab.variables index 7d0a5c65c9..a629d4fc44 100644 --- a/src/themes/default/modules/tab.variables +++ b/src/themes/default/modules/tab.variables @@ -7,5 +7,5 @@ @loadingContentPosition: relative; @loadingContentOffset: -10000px; -@loaderDistanceFromTop: 100px; -@loaderSize: 2.5em; \ No newline at end of file +@loaderDistanceFromTop: 50%; +@loaderSize: 2.5em;