Loading Animation

This commit is contained in:
Cássio Zen
2016-09-05 17:24:24 -03:00
parent 1c46474384
commit 04db90710b
5 changed files with 89 additions and 17 deletions

View File

@ -33,9 +33,7 @@
left: 50%;
width: 100%;
height: 100%;
-webkit-animation: loader 0.6s linear;
animation: loader 0.6s linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border-radius: 500rem;
border-color: #767676 transparent transparent;
@ -93,3 +91,25 @@
.disabled {
display: none;
}
/*Animations*/
.animateItem{
position: absolute;
white-space: nowrap;
transform: translateX(-50%);
}
.enter {
opacity: 0.01;
}
.enter.enterActive {
opacity: 1;
transition: opacity 500ms ease-in;
}
.leave {
opacity: 1;
}
.leave.leaveActive {
opacity: 0.01;
transition: opacity 300ms ease-in;
}

View File

@ -1,21 +1,68 @@
import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import styles from './Loader.css';
export default function Loader({ active, style, className = '', children }) {
// Class names
let classNames = styles.loader;
if (active) {
classNames += ` ${styles.active}`;
}
if (className.length > 0) {
classNames += ` ${className}`;
export default class Loader extends React.Component {
constructor(props) {
super(props);
this.state = {
currentItem: 0,
};
this.setAnimation = this.setAnimation.bind(this);
this.renderChild = this.renderChild.bind(this);
}
// Render child text
let child;
if (children) {
child = <div className={styles.text}>{children}</div>;
componengWillUnmount() {
if (this.interval) {
clearInterval(this.interval);
}
}
return <div className={classNames} style={style}>{child}</div>;
setAnimation() {
if (this.interval) return;
const { children } = this.props;
this.interval = setInterval(() => {
const nextItem = (this.state.currentItem === children.length - 1) ? 0 : this.state.currentItem + 1;
this.setState({ currentItem: nextItem });
}, 5000);
}
renderChild() {
const { children } = this.props;
const { currentItem } = this.state;
if (!children) {
return null;
} else if (typeof children == 'string') {
return <div className={styles.text}>{children}</div>;
} else if (Array.isArray(children)) {
this.setAnimation();
return <div className={styles.text}>
<ReactCSSTransitionGroup
transitionName={styles}
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
<div key={currentItem} className={styles.animateItem}>{children[currentItem]}</div>
</ReactCSSTransitionGroup>
</div>;
}
}
render() {
const { active, style, className = '' } = this.props;
// Class names
let classNames = styles.loader;
if (active) {
classNames += ` ${styles.active}`;
}
if (className.length > 0) {
classNames += ` ${className}`;
}
return <div className={classNames} style={style}>{this.renderChild()}</div>;
}
}