coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved loading animations

Browse Source
This commit is contained in:
Jori Lallo
2016-10-09 15:17:22 -07:00
parent 2d741afb20
commit 9b1983762c
7 changed files with 115 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/components/AtlasPreviewLoading/AtlasPreviewLoading.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import styles from './AtlasPreviewLoading.scss';
import classNames from 'classnames/bind';
@ -6,13 +7,39 @@ const cx = classNames.bind(styles);
import { randomInteger } from 'utils/random';
export default (props) => {
const randomValues = Array.from(new Array(5), () => `${randomInteger(85, 100)}%`);
export default (_props) => {
return (
<div className={ cx(styles.container, styles.animated) }>
<div className={ cx(styles.mask, styles.header) } style={{ width: `${randomInteger(65,80)}%` }}>&nbsp;</div>
<div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
<div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
<div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
</div>
<ReactCSSTransitionGroup
transitionName="fadeIn"
transitionAppear
transitionEnter
transitionLeave
transitionAppearTimeout={ 0 }
transitionEnterTimeout={ 0 }
transitionLeaveTimeout={ 0 }
>
<div>
<div className={ cx(styles.container, styles.animated) }>
<div
className={ cx(styles.mask, styles.header) }
style={{ width: randomValues[0] }}
>&nbsp;</div>
<div
className={ cx(styles.mask, styles.bodyText) }
style={{ width: randomValues[1] }}
>&nbsp;</div>
<div
className={ cx(styles.mask, styles.bodyText) }
style={{ width: randomValues[2] }}
>&nbsp;</div>
<div
className={ cx(styles.mask, styles.bodyText) }
style={{ width: randomValues[3] }}
>&nbsp;</div>
</div>
</div>
</ReactCSSTransitionGroup>
);
};
};