/* ------------------------------------------------------------------------------
*
* # Ladda progress buttons
*
* Buttons with built-in loading indicators
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Common styles
// ------------------------------
.btn-ladda {
&,
.ladda-spinner,
.ladda-label {
.transition(all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s);
}
// Spinner
.ladda-spinner {
position: absolute;
z-index: 2;
display: inline-block;
top: 50%;
pointer-events: none;
.opacity(0);
}
// Label
.ladda-label {
z-index: 3;
}
// Progress bar
.ladda-progress {
position: absolute;
width: 0;
height: 100%;
left: 0;
top: 0;
background-color: fade(#000, 20%);
visibility: hidden;
.transition(all linear 0.3s);
.opacity(0);
}
&[data-loading] .ladda-progress{
visibility: visible;
.opacity(1);
}
}
// Zoom animation
// ------------------------------
.btn-ladda {
// Common
&[data-style=zoom-in],
&[data-style=zoom-out] {
overflow: hidden;
&,
.ladda-spinner,
.ladda-label {
.transition(0.3s ease all);
}
// Label
.ladda-label {
position: relative;
display: inline-block;
}
// Spinner
.ladda-spinner {
left: 50%;
}
// Loading
&[data-loading] {
.ladda-label {
.opacity(0);
}
.ladda-spinner {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
.opacity(1);
}
}
}
// Zoom in
&[data-style=zoom-in] {
.ladda-spinner {
.scale(0.2);
}
&[data-loading] {
.ladda-label {
.scale(2.2);
}
}
}
// Zoom out
&[data-style=zoom-out] {
.ladda-spinner {
.scale(2.5);
}
&[data-loading] {
.ladda-label {
.scale(0.5);
}
}
}
}
// Expand animation
// ------------------------------
.btn-ladda {
// Left
&[data-style=expand-left] {
overflow: hidden;
.ladda-spinner {
left: 20px;
}
&[data-loading] {
padding-left: 35px;
.ladda-spinner {
.opacity(1);
}
}
}
// Right
&[data-style=expand-right] {
overflow: hidden;
.ladda-spinner {
right: 20px;
}
&[data-loading] {
padding-right: 35px;
.ladda-spinner {
.opacity(1);
}
}
}
// Up
&[data-style=expand-up] {
overflow: hidden;
.ladda-spinner {
top: -16px;
left: 50%;
}
&[data-loading] {
padding-top: 40px;
.ladda-spinner {
top: 12px;
margin-top: 8px;
.opacity(1);
}
}
}
// Down
&[data-style=expand-down] {
overflow: hidden;
.ladda-spinner {
top: 44px;
left: 50%;
}
&[data-loading] {
padding-bottom: 40px;
.ladda-spinner {
.opacity(1);
}
}
}
}
// Slide animation
// ------------------------------
.btn-ladda {
// Left
&[data-style=slide-left] {
overflow: hidden;
.ladda-label {
left: 0;
position: relative;
}
.ladda-spinner {
right: 0;
}
&[data-loading] {
.ladda-label {
left: -100%;
.opacity(0);
}
.ladda-spinner {
right: 50%;
.opacity(1);
}
}
}
// Right
&[data-style=slide-right] {
overflow: hidden;
.ladda-label {
right: 0;
position: relative;
}
.ladda-spinner {
left: 0;
}
&[data-loading] {
.ladda-label {
right: -100%;
.opacity(0);
}
.ladda-spinner {
left: 50%;
.opacity(1);
}
}
}
// Up
&[data-style=slide-up] {
overflow: hidden;
.ladda-label {
top: 0;
position: relative;
}
.ladda-spinner {
top: 100%;
left: 50%;
}
&[data-loading] {
.ladda-label {
top: -16px;
.opacity(0);
}
.ladda-spinner {
top: 16px;
.opacity(1);
}
}
}
// Down
&[data-style=slide-down] {
overflow: hidden;
.ladda-label {
top: 0;
position: relative;
}
.ladda-spinner {
top: -100%;
left: 50%;
}
&[data-loading] {
.ladda-label {
top: 16px;
.opacity(0);
}
.ladda-spinner {
top: 16px;
.opacity(1);
}
}
}
}
// Fade animation
// ------------------------------
.btn-ladda {
&[data-style=fade] {
overflow: hidden;
.ladda-spinner {
left: 50%;
}
&[data-loading] {
.ladda-label {
.opacity(0);
}
.ladda-spinner {
.opacity(1);
}
}
}
}
// Radius animation
// ------------------------------
.btn-ladda {
&[data-style=radius] {
overflow: hidden;
border-radius: @border-radius-small;
.transition(all ease-in-out 0.5s);
.ladda-spinner {
left: 50%;
}
&[data-loading] {
border-radius: @border-radius-large;
.ladda-label {
.opacity(0);
}
.ladda-spinner {
.opacity(1);
}
}
}
}