Skip to content
Permalink
Browse files

feat(spinners): add delay class to delay animation for 300ms

  • Loading branch information...
brandonferrua committed Sep 23, 2017
1 parent a1f7038 commit fbaa8d4ac597a10f0ed740eea0b0dbef98c7a0f4
@@ -121,6 +121,40 @@
animation-delay: 750ms;
}

/**
* @summary Set a delay of 300ms on spinner
* @selector .slds-spinner_delayed
* @restrict .slds-spinner
* @modifier
* @group timing
*/
.slds-spinner_delayed {

&:before {
animation-delay: 216.66667ms;
}

.slds-spinner__dot-a:before {
animation-delay: 383.33333ms;
}

.slds-spinner__dot-b:before {
animation-delay: 550ms;
}

&:after {
animation-delay: 716.66667ms;
}

.slds-spinner__dot-a:after {
animation-delay: 883.33333ms;
}

.slds-spinner__dot-b:after {
animation-delay: 1050ms;
}
}


/**
* This creates the blue brand spinner
@@ -149,8 +183,6 @@
*
* @selector .slds-spinner_inverse
* @restrict .slds-spinner
* @modifier
* @group color
*/

.slds-spinner_inverse,
@@ -8,7 +8,7 @@ import classNames from 'classnames';
// Partial(s)
/// ////////////////////////////////////////

let Demo = props => (
const Demo = props => (
<div
className={classNames('demo-only', props.className)}
style={{ height: '6rem' }}
@@ -78,5 +78,30 @@ export let examples = [
</SpinnerContainer>
</Demo>
)
},
{
id: 'inverse',
label: 'On inverse background',
element: (
<div
className="demo-only"
style={{ backgroundColor: '#16325c', height: '6rem' }}
>
<SpinnerContainer>
<Spinner className="slds-spinner_medium slds-spinner_inverse" />
</SpinnerContainer>
</div>
)
},
{
id: 'delayed',
label: 'With 300ms delay',
element: (
<Demo>
<SpinnerContainer>
<Spinner className="slds-spinner_medium slds-spinner_delayed" />
</SpinnerContainer>
</Demo>
)
}
];

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

0 comments on commit fbaa8d4

Please sign in to comment.
You can’t perform that action at this time.