Skip to content

Commit c0d8714

Browse files
BunlongBunlong
committed
add comet and cylinder spin
1 parent 3823e3b commit c0d8714

File tree

6 files changed

+176
-30
lines changed

6 files changed

+176
-30
lines changed

‎dist/react-page-loading.js‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2663,9 +2663,9 @@ var _propTypes = __webpack_require__(13);
26632663

26642664
var _propTypes2 = _interopRequireDefault(_propTypes);
26652665

2666-
var _BubbleLoader = __webpack_require__(39);
2666+
var _CylinderSpinLoader = __webpack_require__(39);
26672667

2668-
var _BubbleLoader2 = _interopRequireDefault(_BubbleLoader);
2668+
var _CylinderSpinLoader2 = _interopRequireDefault(_CylinderSpinLoader);
26692669

26702670
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26712671

@@ -2676,6 +2676,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
26762676
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
26772677
// import BarLoader from './bar/BarLoader'
26782678
// import BubbleSpinLoader from './bubble-spin/BubbleSpinLoader'
2679+
// import BubbleLoader from './bubble/BubbleLoader'
2680+
// import CometSpinLoader from './comet-spin/CometSpinLoader'
26792681

26802682

26812683
var PageLoading = function (_React$Component) {
@@ -2718,7 +2720,7 @@ var PageLoading = function (_React$Component) {
27182720
return _react2.default.createElement(
27192721
'div',
27202722
{ style: containerStyle },
2721-
_react2.default.createElement(_BubbleLoader2.default, null)
2723+
_react2.default.createElement(_CylinderSpinLoader2.default, null)
27222724
);
27232725
}
27242726

@@ -4954,29 +4956,29 @@ var _propTypes = __webpack_require__(13);
49544956

49554957
var _propTypes2 = _interopRequireDefault(_propTypes);
49564958

4957-
var _Bubble = __webpack_require__(40);
4959+
var _CylinderSpin = __webpack_require__(40);
49584960

4959-
var _Bubble2 = _interopRequireDefault(_Bubble);
4961+
var _CylinderSpin2 = _interopRequireDefault(_CylinderSpin);
49604962

49614963
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
49624964

4963-
var BubbleLoader = function BubbleLoader(props) {
4964-
return _react2.default.createElement(_Bubble2.default, props);
4965+
var CylinderSpinLoader = function CylinderSpinLoader(props) {
4966+
return _react2.default.createElement(_CylinderSpin2.default, props);
49654967
};
49664968

4967-
BubbleLoader.propTypes = {
4969+
CylinderSpinLoader.propTypes = {
49684970
color: _propTypes2.default.string,
49694971
duration: _propTypes2.default.number,
49704972
size: _propTypes2.default.number
49714973
};
49724974

4973-
BubbleLoader.defaultProps = {
4975+
CylinderSpinLoader.defaultProps = {
49744976
color: '#ccc',
4975-
duration: 1.8,
4976-
size: 10
4977+
duration: 1.1,
4978+
size: 25
49774979
};
49784980

4979-
exports.default = BubbleLoader;
4981+
exports.default = CylinderSpinLoader;
49804982

49814983
/***/ }),
49824984
/* 40 */
@@ -4989,8 +4991,8 @@ Object.defineProperty(exports, "__esModule", {
49894991
value: true
49904992
});
49914993

4992-
var _templateObject = _taggedTemplateLiteral(['\n 0%,\n 80%,\n 100% {\n box-shadow: 0 2.5em 0 -1.3em;\n }\n 40% {\n box-shadow: 0 2.5em 0 0;\n }\n'], ['\n 0%,\n 80%,\n 100% {\n box-shadow: 0 2.5em 0 -1.3em;\n }\n 40% {\n box-shadow: 0 2.5em 0 0;\n }\n']),
4993-
_templateObject2 = _taggedTemplateLiteral(['\n animation: ', ';\n animation-delay: ', ';\n animation-fill-mode: both;\n border-radius: 50%;\n color: ', ';\n font-size: ', ';\n height: 2.5em;\n margin: 80px auto;\n position: relative;\n text-indent: -9999em;\n transform: translateZ(0);\n width: 2.5em;\n &:before {\n animation: ', ';\n animation-delay: ', ';\n animation-fill-mode: both;\n border-radius: 50%;\n content: \'\';\n height: 2.5em;\n left: -3.5em;\n position: absolute;\n top: 0;\n width: 2.5em;\n }\n &:after {\n animation: ', ';\n animation-fill-mode: both;\n border-radius: 50%;\n content: \'\';\n height: 2.5em;\n left: 3.5em;\n position: absolute;\n top: 0;\n width: 2.5em;\n }\n'], ['\n animation: ', ';\n animation-delay: ', ';\n animation-fill-mode: both;\n border-radius: 50%;\n color: ', ';\n font-size: ', ';\n height: 2.5em;\n margin: 80px auto;\n position: relative;\n text-indent: -9999em;\n transform: translateZ(0);\n width: 2.5em;\n &:before {\n animation: ', ';\n animation-delay: ', ';\n animation-fill-mode: both;\n border-radius: 50%;\n content: \'\';\n height: 2.5em;\n left: -3.5em;\n position: absolute;\n top: 0;\n width: 2.5em;\n }\n &:after {\n animation: ', ';\n animation-fill-mode: both;\n border-radius: 50%;\n content: \'\';\n height: 2.5em;\n left: 3.5em;\n position: absolute;\n top: 0;\n width: 2.5em;\n }\n']);
4994+
var _templateObject = _taggedTemplateLiteral(['\n 0%,\n 100% {\n box-shadow: 0em -2.6em 0em 0em ', ', 1.8em -1.8em 0 0em rgba(', ', 0.2), 2.5em 0em 0 0em rgba(', ', 0.2), 1.75em 1.75em 0 0em rgba(', ', 0.2), 0em 2.5em 0 0em rgba(', ', 0.2), -1.8em 1.8em 0 0em rgba(', ', 0.2), -2.6em 0em 0 0em rgba(', ', 0.5), -1.8em -1.8em 0 0em rgba(', ', 0.7);\n }\n 12.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.7), 1.8em -1.8em 0 0em ', ', 2.5em 0em 0 0em rgba(', ', 0.2), 1.75em 1.75em 0 0em rgba(', ', 0.2), 0em 2.5em 0 0em rgba(', ', 0.2), -1.8em 1.8em 0 0em rgba(', ', 0.2), -2.6em 0em 0 0em rgba(', ', 0.2), -1.8em -1.8em 0 0em rgba(', ', 0.5);\n }\n 25% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.5), 1.8em -1.8em 0 0em rgba(', ', 0.7), 2.5em 0em 0 0em ', ', 1.75em 1.75em 0 0em rgba(', ', 0.2), 0em 2.5em 0 0em rgba(', ', 0.2), -1.8em 1.8em 0 0em rgba(', ', 0.2), -2.6em 0em 0 0em rgba(', ', 0.2), -1.8em -1.8em 0 0em rgba(', ', 0.2);\n }\n 37.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.2), 1.8em -1.8em 0 0em rgba(', ', 0.5), 2.5em 0em 0 0em rgba(', ', 0.7), 1.75em 1.75em 0 0em ', ', 0em 2.5em 0 0em rgba(', ', 0.2), -1.8em 1.8em 0 0em rgba(', ', 0.2), -2.6em 0em 0 0em rgba(', ', 0.2), -1.8em -1.8em 0 0em rgba(', ', 0.2);\n }\n 50% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.2), 1.8em -1.8em 0 0em rgba(', ', 0.2), 2.5em 0em 0 0em rgba(', ', 0.5), 1.75em 1.75em 0 0em rgba(', ', 0.7), 0em 2.5em 0 0em ', ', -1.8em 1.8em 0 0em rgba(', ', 0.2), -2.6em 0em 0 0em rgba(', ', 0.2), -1.8em -1.8em 0 0em rgba(', ', 0.2);\n }\n 62.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.2), 1.8em -1.8em 0 0em rgba(', ', 0.2), 2.5em 0em 0 0em rgba(', ', 0.2), 1.75em 1.75em 0 0em rgba(', ', 0.5), 0em 2.5em 0 0em rgba(', ', 0.7), -1.8em 1.8em 0 0em ', ', -2.6em 0em 0 0em rgba(', ', 0.2), -1.8em -1.8em 0 0em rgba(', ', 0.2);\n }\n 75% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.2), 1.8em -1.8em 0 0em rgba(', ', 0.2), 2.5em 0em 0 0em rgba(', ', 0.2), 1.75em 1.75em 0 0em rgba(', ', 0.2), 0em 2.5em 0 0em rgba(', ', 0.5), -1.8em 1.8em 0 0em rgba(', ', 0.7), -2.6em 0em 0 0em ', ', -1.8em -1.8em 0 0em rgba(', ', 0.2);\n }\n 87.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.2), 1.8em -1.8em 0 0em rgba(', ', 0.2), 2.5em 0em 0 0em rgba(', ', 0.2), 1.75em 1.75em 0 0em rgba(', ', 0.2), 0em 2.5em 0 0em rgba(', ', 0.2), -1.8em 1.8em 0 0em rgba(', ', 0.5), -2.6em 0em 0 0em rgba(', ', 0.7), -1.8em -1.8em 0 0em ', ';\n }\n '], ['\n 0%,\n 100% {\n box-shadow: 0em -2.6em 0em 0em ', ', 1.8em -1.8em 0 0em rgba(', ', 0.2), 2.5em 0em 0 0em rgba(', ', 0.2), 1.75em 1.75em 0 0em rgba(', ', 0.2), 0em 2.5em 0 0em rgba(', ', 0.2), -1.8em 1.8em 0 0em rgba(', ', 0.2), -2.6em 0em 0 0em rgba(', ', 0.5), -1.8em -1.8em 0 0em rgba(', ', 0.7);\n }\n 12.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.7), 1.8em -1.8em 0 0em ', ', 2.5em 0em 0 0em rgba(', ', 0.2), 1.75em 1.75em 0 0em rgba(', ', 0.2), 0em 2.5em 0 0em rgba(', ', 0.2), -1.8em 1.8em 0 0em rgba(', ', 0.2), -2.6em 0em 0 0em rgba(', ', 0.2), -1.8em -1.8em 0 0em rgba(', ', 0.5);\n }\n 25% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.5), 1.8em -1.8em 0 0em rgba(', ', 0.7), 2.5em 0em 0 0em ', ', 1.75em 1.75em 0 0em rgba(', ', 0.2), 0em 2.5em 0 0em rgba(', ', 0.2), -1.8em 1.8em 0 0em rgba(', ', 0.2), -2.6em 0em 0 0em rgba(', ', 0.2), -1.8em -1.8em 0 0em rgba(', ', 0.2);\n }\n 37.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.2), 1.8em -1.8em 0 0em rgba(', ', 0.5), 2.5em 0em 0 0em rgba(', ', 0.7), 1.75em 1.75em 0 0em ', ', 0em 2.5em 0 0em rgba(', ', 0.2), -1.8em 1.8em 0 0em rgba(', ', 0.2), -2.6em 0em 0 0em rgba(', ', 0.2), -1.8em -1.8em 0 0em rgba(', ', 0.2);\n }\n 50% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.2), 1.8em -1.8em 0 0em rgba(', ', 0.2), 2.5em 0em 0 0em rgba(', ', 0.5), 1.75em 1.75em 0 0em rgba(', ', 0.7), 0em 2.5em 0 0em ', ', -1.8em 1.8em 0 0em rgba(', ', 0.2), -2.6em 0em 0 0em rgba(', ', 0.2), -1.8em -1.8em 0 0em rgba(', ', 0.2);\n }\n 62.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.2), 1.8em -1.8em 0 0em rgba(', ', 0.2), 2.5em 0em 0 0em rgba(', ', 0.2), 1.75em 1.75em 0 0em rgba(', ', 0.5), 0em 2.5em 0 0em rgba(', ', 0.7), -1.8em 1.8em 0 0em ', ', -2.6em 0em 0 0em rgba(', ', 0.2), -1.8em -1.8em 0 0em rgba(', ', 0.2);\n }\n 75% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.2), 1.8em -1.8em 0 0em rgba(', ', 0.2), 2.5em 0em 0 0em rgba(', ', 0.2), 1.75em 1.75em 0 0em rgba(', ', 0.2), 0em 2.5em 0 0em rgba(', ', 0.5), -1.8em 1.8em 0 0em rgba(', ', 0.7), -2.6em 0em 0 0em ', ', -1.8em -1.8em 0 0em rgba(', ', 0.2);\n }\n 87.5% {\n box-shadow: 0em -2.6em 0em 0em rgba(', ', 0.2), 1.8em -1.8em 0 0em rgba(', ', 0.2), 2.5em 0em 0 0em rgba(', ', 0.2), 1.75em 1.75em 0 0em rgba(', ', 0.2), 0em 2.5em 0 0em rgba(', ', 0.2), -1.8em 1.8em 0 0em rgba(', ', 0.5), -2.6em 0em 0 0em rgba(', ', 0.7), -1.8em -1.8em 0 0em ', ';\n }\n ']),
4995+
_templateObject2 = _taggedTemplateLiteral(['\n animation: ', ';\n border-radius: 50%;\n font-size: ', ';\n height: 1em;\n margin: 100px auto;\n position: relative;\n text-indent: -9999em;\n transform: translateZ(0);\n width: 1em;\n'], ['\n animation: ', ';\n border-radius: 50%;\n font-size: ', ';\n height: 1em;\n margin: 100px auto;\n position: relative;\n text-indent: -9999em;\n transform: translateZ(0);\n width: 1em;\n']);
49944996

49954997
var _styledComponents = __webpack_require__(41);
49964998

@@ -5000,25 +5002,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
50005002

50015003
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
50025004

5003-
var loading = (0, _styledComponents.keyframes)(_templateObject);
5005+
function animation(props) {
5006+
var d = document.createElement('div');
5007+
d.style.color = props.color;
5008+
document.body.appendChild(d);
5009+
var rgbcolor = window.getComputedStyle(d).color;
5010+
var match = /rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+[.d+]*)*\)/g.exec(rgbcolor);
5011+
var color = match[1] + ', ' + match[2] + ', ' + match[3];
50045012

5005-
var Bubble = _styledComponents2.default.div(_templateObject2, function (props) {
5006-
return loading + ' ' + props.duration + 's infinite ease-in-out;';
5007-
}, function (props) {
5008-
return props.duration * -0.16 + 's';
5009-
}, function (props) {
5010-
return props.color;
5013+
return (0, _styledComponents.keyframes)(_templateObject, props.color, color, color, color, color, color, color, color, color, props.color, color, color, color, color, color, color, color, color, props.color, color, color, color, color, color, color, color, color, props.color, color, color, color, color, color, color, color, color, props.color, color, color, color, color, color, color, color, color, props.color, color, color, color, color, color, color, color, color, props.color, color, color, color, color, color, color, color, color, props.color);
5014+
}
5015+
5016+
var CylinderSpin = _styledComponents2.default.div(_templateObject2, function (props) {
5017+
return animation(props) + ' ' + props.duration + 's infinite ease;';
50115018
}, function (props) {
50125019
return props.size + 'px';
5013-
}, function (props) {
5014-
return loading + ' ' + props.duration + 's infinite ease-in-out;';
5015-
}, function (props) {
5016-
return props.duration * -0.32 + 's';
5017-
}, function (props) {
5018-
return loading + ' ' + props.duration + 's infinite ease-in-out;';
50195020
});
50205021

5021-
exports.default = Bubble;
5022+
exports.default = CylinderSpin;
50225023

50235024
/***/ }),
50245025
/* 41 */

‎src/comet-spin/CometSpin.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import styled, { keyframes } from 'styled-components'
2+
3+
const loading = keyframes`
4+
0% {
5+
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
6+
}
7+
5%,
8+
95% {
9+
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
10+
}
11+
10%,
12+
59% {
13+
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
14+
}
15+
20% {
16+
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
17+
}
18+
38% {
19+
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
20+
}
21+
100% {
22+
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
23+
}
24+
`
25+
26+
const round = keyframes`
27+
0% {
28+
transform: rotate(0deg);
29+
}
30+
100% {
31+
transform: rotate(360deg);
32+
}
33+
`
34+
35+
const CometSpin = styled.div`
36+
animation: ${props => `${loading} ${props.duration}s infinite ease, ${round} ${props.duration}s infinite ease`};
37+
border-radius: 50%;
38+
color: ${props => props.color};
39+
font-size: ${props => `${props.size}px`};
40+
height: 1em;
41+
margin: 72px auto;
42+
overflow: hidden;
43+
position: relative;
44+
text-indent: -9999em;
45+
transform: translateZ(0);
46+
width: 1em;
47+
`
48+
49+
export default CometSpin

‎src/comet-spin/CometSpinLoader.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import CometSpin from './CometSpin'
4+
5+
const CometSpinLoader = props => (
6+
<CometSpin {...props} />
7+
)
8+
9+
CometSpinLoader.propTypes = {
10+
color: PropTypes.string,
11+
duration: PropTypes.number,
12+
size: PropTypes.number,
13+
}
14+
15+
CometSpinLoader.defaultProps = {
16+
color: '#ccc',
17+
duration: 1.7,
18+
size: 90,
19+
}
20+
21+
export default CometSpinLoader

‎src/cylinder-spin/CylinderSpin.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import styled, { keyframes } from 'styled-components'
2+
3+
function animation(props) {
4+
const d = document.createElement('div')
5+
d.style.color = props.color
6+
document.body.appendChild(d)
7+
const rgbcolor = window.getComputedStyle(d).color
8+
const match = /rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+[.d+]*)*\)/g.exec(rgbcolor)
9+
const color = `${match[1]}, ${match[2]}, ${match[3]}`
10+
11+
return keyframes`
12+
0%,
13+
100% {
14+
box-shadow: 0em -2.6em 0em 0em ${props.color}, 1.8em -1.8em 0 0em rgba(${color}, 0.2), 2.5em 0em 0 0em rgba(${color}, 0.2), 1.75em 1.75em 0 0em rgba(${color}, 0.2), 0em 2.5em 0 0em rgba(${color}, 0.2), -1.8em 1.8em 0 0em rgba(${color}, 0.2), -2.6em 0em 0 0em rgba(${color}, 0.5), -1.8em -1.8em 0 0em rgba(${color}, 0.7);
15+
}
16+
12.5% {
17+
box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.7), 1.8em -1.8em 0 0em ${props.color}, 2.5em 0em 0 0em rgba(${color}, 0.2), 1.75em 1.75em 0 0em rgba(${color}, 0.2), 0em 2.5em 0 0em rgba(${color}, 0.2), -1.8em 1.8em 0 0em rgba(${color}, 0.2), -2.6em 0em 0 0em rgba(${color}, 0.2), -1.8em -1.8em 0 0em rgba(${color}, 0.5);
18+
}
19+
25% {
20+
box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.5), 1.8em -1.8em 0 0em rgba(${color}, 0.7), 2.5em 0em 0 0em ${props.color}, 1.75em 1.75em 0 0em rgba(${color}, 0.2), 0em 2.5em 0 0em rgba(${color}, 0.2), -1.8em 1.8em 0 0em rgba(${color}, 0.2), -2.6em 0em 0 0em rgba(${color}, 0.2), -1.8em -1.8em 0 0em rgba(${color}, 0.2);
21+
}
22+
37.5% {
23+
box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.2), 1.8em -1.8em 0 0em rgba(${color}, 0.5), 2.5em 0em 0 0em rgba(${color}, 0.7), 1.75em 1.75em 0 0em ${props.color}, 0em 2.5em 0 0em rgba(${color}, 0.2), -1.8em 1.8em 0 0em rgba(${color}, 0.2), -2.6em 0em 0 0em rgba(${color}, 0.2), -1.8em -1.8em 0 0em rgba(${color}, 0.2);
24+
}
25+
50% {
26+
box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.2), 1.8em -1.8em 0 0em rgba(${color}, 0.2), 2.5em 0em 0 0em rgba(${color}, 0.5), 1.75em 1.75em 0 0em rgba(${color}, 0.7), 0em 2.5em 0 0em ${props.color}, -1.8em 1.8em 0 0em rgba(${color}, 0.2), -2.6em 0em 0 0em rgba(${color}, 0.2), -1.8em -1.8em 0 0em rgba(${color}, 0.2);
27+
}
28+
62.5% {
29+
box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.2), 1.8em -1.8em 0 0em rgba(${color}, 0.2), 2.5em 0em 0 0em rgba(${color}, 0.2), 1.75em 1.75em 0 0em rgba(${color}, 0.5), 0em 2.5em 0 0em rgba(${color}, 0.7), -1.8em 1.8em 0 0em ${props.color}, -2.6em 0em 0 0em rgba(${color}, 0.2), -1.8em -1.8em 0 0em rgba(${color}, 0.2);
30+
}
31+
75% {
32+
box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.2), 1.8em -1.8em 0 0em rgba(${color}, 0.2), 2.5em 0em 0 0em rgba(${color}, 0.2), 1.75em 1.75em 0 0em rgba(${color}, 0.2), 0em 2.5em 0 0em rgba(${color}, 0.5), -1.8em 1.8em 0 0em rgba(${color}, 0.7), -2.6em 0em 0 0em ${props.color}, -1.8em -1.8em 0 0em rgba(${color}, 0.2);
33+
}
34+
87.5% {
35+
box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.2), 1.8em -1.8em 0 0em rgba(${color}, 0.2), 2.5em 0em 0 0em rgba(${color}, 0.2), 1.75em 1.75em 0 0em rgba(${color}, 0.2), 0em 2.5em 0 0em rgba(${color}, 0.2), -1.8em 1.8em 0 0em rgba(${color}, 0.5), -2.6em 0em 0 0em rgba(${color}, 0.7), -1.8em -1.8em 0 0em ${props.color};
36+
}
37+
`;
38+
}
39+
40+
const CylinderSpin = styled.div`
41+
animation: ${props => `${animation(props)} ${props.duration}s infinite ease;`};
42+
border-radius: 50%;
43+
font-size: ${props => `${props.size}px`};
44+
height: 1em;
45+
margin: 100px auto;
46+
position: relative;
47+
text-indent: -9999em;
48+
transform: translateZ(0);
49+
width: 1em;
50+
`
51+
52+
export default CylinderSpin

‎src/cylinder-spin/CylinderSpinLoader.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import CylinderSpin from './CylinderSpin'
4+
5+
const CylinderSpinLoader = props => (
6+
<CylinderSpin {...props} />
7+
)
8+
9+
CylinderSpinLoader.propTypes = {
10+
color: PropTypes.string,
11+
duration: PropTypes.number,
12+
size: PropTypes.number,
13+
}
14+
15+
CylinderSpinLoader.defaultProps = {
16+
color: '#ccc',
17+
duration: 1.1,
18+
size: 25,
19+
}
20+
21+
export default CylinderSpinLoader

‎src/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33
// import BarLoader from './bar/BarLoader'
44
// import BubbleSpinLoader from './bubble-spin/BubbleSpinLoader'
5-
import BubbleLoader from './bubble/BubbleLoader'
5+
// import BubbleLoader from './bubble/BubbleLoader'
6+
// import CometSpinLoader from './comet-spin/CometSpinLoader'
7+
import CylinderSpinLoader from './cylinder-spin/CylinderSpinLoader'
68

79
export default class PageLoading extends React.Component {
810

@@ -32,7 +34,7 @@ export default class PageLoading extends React.Component {
3234
if (loading) {
3335
return (
3436
<div style={containerStyle}>
35-
<BubbleLoader />
37+
<CylinderSpinLoader />
3638
</div>
3739
)
3840
}

0 commit comments

Comments
 (0)