Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(spinners): add delay class to delay animation for 300ms
  • Loading branch information
brandonferrua committed Sep 23, 2017
1 parent a1f7038 commit fbaa8d4
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 145 deletions.
36 changes: 34 additions & 2 deletions ui/components/spinners/base/_index.scss
Expand Up @@ -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
Expand Down Expand Up @@ -149,8 +183,6 @@
*
* @selector .slds-spinner_inverse
* @restrict .slds-spinner
* @modifier
* @group color
*/

.slds-spinner_inverse,
Expand Down
27 changes: 26 additions & 1 deletion ui/components/spinners/base/example.jsx
Expand Up @@ -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' }}
Expand Down Expand Up @@ -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>
)
}
];
60 changes: 0 additions & 60 deletions ui/components/spinners/colors/example.jsx

This file was deleted.

82 changes: 0 additions & 82 deletions ui/components/spinners/sizes/example.jsx

This file was deleted.

0 comments on commit fbaa8d4

Please sign in to comment.