Skip to content

Commit 6095906

Browse files
monsterooomonsterooo
committed
增加动画组件
1 parent 063b6ea commit 6095906

File tree

8 files changed

+427
-1
lines changed

8 files changed

+427
-1
lines changed

‎example/src/App.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ import {
1717
BallPulse,
1818
BallPulseRise,
1919
BallPulseSync,
20+
BallRotate,
21+
BallRunningDots,
22+
BallScale,
23+
BallScaleMultiple,
24+
BallScalePulse,
2025
} from 'react-pretty-loading';
2126

2227
export default class App extends Component {
@@ -73,6 +78,22 @@ export default class App extends Component {
7378
<div className="loading__item">
7479
<BallPulse loading center />
7580
</div>
81+
<div className="loading__item">
82+
<BallRotate loading center />
83+
</div>
84+
<div className="loading__item">
85+
<BallRunningDots loading center />
86+
</div>
87+
<div className="loading__item">
88+
<BallScale loading center />
89+
</div>
90+
<div className="loading__item">
91+
<BallScaleMultiple loading center />
92+
</div>
93+
<div className="loading__item">
94+
<BallScalePulse loading center />
95+
</div>
96+
7697
</div>
7798
</div>
7899
)

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/BallRotate.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
import { css, cx } from 'emotion';
3+
import { keyframes } from 'react-emotion'
4+
import { compose, pure, withProps, defaultProps } from 'recompose';
5+
import { flexCenter } from '../utils';
6+
7+
const rotate = keyframes`
8+
0% {
9+
transform: rotate(0deg);
10+
}
11+
50% {
12+
transform: rotate(180deg);
13+
}
14+
100% {
15+
transform: rotate(360deg);
16+
}
17+
`;
18+
const props = ({
19+
color,
20+
width,
21+
}) => {
22+
const BallRotate = css`
23+
position: relative;
24+
box-sizing: border-box;
25+
display: block;
26+
font-size: 0;
27+
color: ${color};
28+
width: ${width}px;
29+
height: ${width}px;
30+
31+
> div {
32+
display: inline-block;
33+
float: none;
34+
background-color: currentColor;
35+
border: 0 solid currentColor;
36+
width: ${width}px;
37+
height: ${width}px;
38+
border-radius: 100%;
39+
animation: ${rotate} 1s cubic-bezier(.7, -.13, .22, .86) infinite;
40+
}
41+
> div:before,
42+
> div:after {
43+
position: absolute;
44+
width: inherit;
45+
height: inherit;
46+
margin: inherit;
47+
content: "";
48+
background: currentColor;
49+
border-radius: inherit;
50+
opacity: .8;
51+
}
52+
> div:before {
53+
top: 0;
54+
left: -150%;
55+
}
56+
> div:after {
57+
top: 0;
58+
left: 150%;
59+
}
60+
`;
61+
return {
62+
BallRotate,
63+
};
64+
};
65+
export default compose(
66+
pure,
67+
defaultProps({
68+
width: 10,
69+
color: '#fff',
70+
loading: false,
71+
}),
72+
withProps(props),
73+
)(({ center, loading, BallRotate }) => (
74+
<div className={cx('react-loading-wrap', {[flexCenter]: center})}>
75+
{loading ? (
76+
<div className={BallRotate}>
77+
<div></div>
78+
</div>
79+
) : null}
80+
</div>
81+
));

‎src/components/BallRunningDots.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from 'react';
2+
import { css, cx } from 'emotion';
3+
import { keyframes } from 'react-emotion'
4+
import { compose, pure, withProps, defaultProps } from 'recompose';
5+
import { flexCenter } from '../utils';
6+
7+
const dots = keyframes`
8+
0%,
9+
100% {
10+
width: 100%;
11+
height: 100%;
12+
transform: translateY(0) translateX(500%);
13+
}
14+
80% {
15+
transform: translateY(0) translateX(0);
16+
}
17+
85% {
18+
width: 100%;
19+
height: 100%;
20+
transform: translateY(-125%) translateX(0);
21+
}
22+
90% {
23+
width: 200%;
24+
height: 75%;
25+
}
26+
95% {
27+
width: 100%;
28+
height: 100%;
29+
transform: translateY(-100%) translateX(500%);
30+
}
31+
`;
32+
const props = ({
33+
color,
34+
width,
35+
}) => {
36+
const BallRunningDots = css`
37+
position: relative;
38+
box-sizing: border-box;
39+
display: block;
40+
font-size: 0;
41+
color: ${color};
42+
width: ${width}px;
43+
height: ${width}px;
44+
45+
> div {
46+
display: inline-block;
47+
float: none;
48+
background-color: currentColor;
49+
border: 0 solid currentColor;
50+
position: absolute;
51+
width: 10px;
52+
height: 10px;
53+
margin-left: -25px;
54+
border-radius: 100%;
55+
animation: ${dots} 2s linear infinite;
56+
}
57+
58+
> div:nth-child(1) {
59+
animation-delay: 0s;
60+
}
61+
> div:nth-child(2) {
62+
animation-delay: -.4s;
63+
}
64+
> div:nth-child(3) {
65+
animation-delay: -.8s;
66+
}
67+
> div:nth-child(4) {
68+
animation-delay: -1.2s;
69+
}
70+
> div:nth-child(5) {
71+
animation-delay: -1.6s;
72+
}
73+
> div:nth-child(6) {
74+
animation-delay: -2s;
75+
}
76+
> div:nth-child(7) {
77+
animation-delay: -2.4s;
78+
}
79+
> div:nth-child(8) {
80+
animation-delay: -2.8s;
81+
}
82+
> div:nth-child(9) {
83+
animation-delay: -3.2s;
84+
}
85+
> div:nth-child(10) {
86+
animation-delay: -3.6s;
87+
}
88+
`;
89+
return {
90+
BallRunningDots,
91+
};
92+
};
93+
export default compose(
94+
pure,
95+
defaultProps({
96+
width: 10,
97+
color: '#fff',
98+
loading: false,
99+
}),
100+
withProps(props),
101+
)(({ center, loading, BallRunningDots }) => (
102+
<div className={cx('react-loading-wrap', {[flexCenter]: center})}>
103+
{loading ? (
104+
<div className={BallRunningDots}>
105+
<div></div>
106+
<div></div>
107+
<div></div>
108+
<div></div>
109+
<div></div>
110+
</div>
111+
) : null}
112+
</div>
113+
));

‎src/components/BallScale.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { css, cx } from 'emotion';
3+
import { keyframes } from 'react-emotion'
4+
import { compose, pure, withProps, defaultProps } from 'recompose';
5+
import { flexCenter } from '../utils';
6+
7+
const scale = keyframes`
8+
0% {
9+
opacity: 1;
10+
transform: scale(0);
11+
}
12+
100% {
13+
opacity: 0;
14+
transform: scale(1);
15+
}
16+
`;
17+
const props = ({
18+
color,
19+
width,
20+
}) => {
21+
const BallScale = css`
22+
position: relative;
23+
box-sizing: border-box;
24+
display: block;
25+
font-size: 0;
26+
color: ${color};
27+
width: ${width}px;
28+
height: ${width}px;
29+
30+
> div {
31+
display: inline-block;
32+
float: none;
33+
background-color: currentColor;
34+
border: 0 solid currentColor;
35+
width: ${width}px;
36+
height: ${width}px;
37+
border-radius: 100%;
38+
opacity: 0;
39+
animation: ${scale} 1s 0s ease-in-out infinite;
40+
}
41+
`;
42+
return {
43+
BallScale,
44+
};
45+
};
46+
export default compose(
47+
pure,
48+
defaultProps({
49+
width: 32,
50+
color: '#fff',
51+
loading: false,
52+
}),
53+
withProps(props),
54+
)(({ center, loading, BallScale }) => (
55+
<div className={cx('react-loading-wrap', {[flexCenter]: center})}>
56+
{loading ? (
57+
<div className={BallScale}>
58+
<div></div>
59+
</div>
60+
) : null}
61+
</div>
62+
));

‎src/components/BallScaleMultiple.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
import { css, cx } from 'emotion';
3+
import { keyframes } from 'react-emotion'
4+
import { compose, pure, withProps, defaultProps } from 'recompose';
5+
import { flexCenter } from '../utils';
6+
7+
const scale = keyframes`
8+
0% {
9+
opacity: 0;
10+
transform: scale(0);
11+
}
12+
5% {
13+
opacity: .75;
14+
}
15+
100% {
16+
opacity: 0;
17+
transform: scale(1);
18+
}
19+
`;
20+
const props = ({
21+
color,
22+
width,
23+
}) => {
24+
const BallScaleMultiple = css`
25+
position: relative;
26+
box-sizing: border-box;
27+
display: block;
28+
font-size: 0;
29+
color: ${color};
30+
width: ${width}px;
31+
height: ${width}px;
32+
33+
> div {
34+
display: inline-block;
35+
float: none;
36+
background-color: currentColor;
37+
border: 0 solid currentColor;
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
width: ${width}px;
42+
height: ${width}px;
43+
border-radius: 100%;
44+
opacity: 0;
45+
animation: ${scale} 1s 0s linear infinite;
46+
}
47+
> div:nth-child(2) {
48+
animation-delay: .2s;
49+
}
50+
> div:nth-child(3) {
51+
animation-delay: .4s;
52+
}
53+
`;
54+
return {
55+
BallScaleMultiple,
56+
};
57+
};
58+
export default compose(
59+
pure,
60+
defaultProps({
61+
width: 32,
62+
color: '#fff',
63+
loading: false,
64+
}),
65+
withProps(props),
66+
)(({ center, loading, BallScaleMultiple }) => (
67+
<div className={cx('react-loading-wrap', {[flexCenter]: center})}>
68+
{loading ? (
69+
<div className={BallScaleMultiple}>
70+
<div></div>
71+
<div></div>
72+
<div></div>
73+
</div>
74+
) : null}
75+
</div>
76+
));

0 commit comments

Comments
 (0)