Skip to content

Commit 5742530

Browse files
JoshK2JoshK2
authored
Merge pull request #16 from GuilhermeJSilva/master
Added several size parameters
2 parents d48e12d + 0a492df commit 5742530

6 files changed

Lines changed: 69 additions & 51 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ Component that accepts `size` prop have a default size in pixel.
3535
| Spinner | color: string | size: number | className: string | style: object |
3636
| ---------------- | ------------ | ------------- | ----------------- | ------------- |
3737
| `<Circle/>` | `#7f58af` | `64` | `""` | `{}` |
38-
| `<Default/>` | `#7f58af` | - | `""` | `{}` |
38+
| `<Default/>` | `#7f58af` | `80` | `""` | `{}` |
3939
| `<Ellipsis/>` | `#7f58af` | `80` | `""` | `{}` |
4040
| `<DualRing/>` | `#7f58af` | `80` | `""` | `{}` |
4141
| `<Facebook/>` | `#7f58af` | `80` | `""` | `{}` |
42-
| `<Grid/>` | `#7f58af` | - | `""` | `{}` |
42+
| `<Grid/>` | `#7f58af` | `80` | `""` | `{}` |
4343
| `<Heart/>` | `#7f58af` | `80` | `""` | `{}` |
4444
| `<Hourglass/>` | `#7f58af` | `32` | `""` | `{}` |
4545
| `<Ring/>` | `#7f58af` | `80` | `""` | `{}` |

‎src/components/Default/index.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33
import './style.css'
44

5-
export default function Default({ color, className, style }) {
6-
const circles = [...Array(12)].map((_, index) => <div key={index} style={{ background: `${color}` }} />)
5+
export default function Default({ color, className, style, size }) {
6+
const circles = [...Array(12)].map((_, index) => (
7+
<div key={index} style={{ background: `${color}`, width: size * 0.075, height: size * 0.075 }} />
8+
))
79

810
return (
9-
<div className={`lds-default ${className}`} style={{ ...style }}>
11+
<div className={`lds-default ${className}`} style={{ height: size, width: size, ...style }}>
1012
{circles}
1113
</div>
1214
)
@@ -15,6 +17,8 @@ export default function Default({ color, className, style }) {
1517
Default.propTypes = {
1618
/** hex color */
1719
color: PropTypes.string,
20+
/** size in pixel */
21+
size: PropTypes.number,
1822
/** class name */
1923
className: PropTypes.string,
2024
/** style object */
@@ -23,6 +27,7 @@ Default.propTypes = {
2327

2428
Default.defaultProps = {
2529
color: '#7f58af',
30+
size: 80,
2631
className: '',
2732
style: {},
2833
}

‎src/components/Default/style.css‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -14,63 +14,63 @@
1414
}
1515
.lds-default div:nth-child(1) {
1616
animation-delay: 0s;
17-
top: 37px;
18-
left: 66px;
17+
top: 46.25%;
18+
left: 82.5%;
1919
}
2020
.lds-default div:nth-child(2) {
2121
animation-delay: -0.1s;
22-
top: 22px;
23-
left: 62px;
22+
top: 27.5%;
23+
left: 77.5%;
2424
}
2525
.lds-default div:nth-child(3) {
2626
animation-delay: -0.2s;
27-
top: 11px;
28-
left: 52px;
27+
top: 13.75%;
28+
left: 65%;
2929
}
3030
.lds-default div:nth-child(4) {
3131
animation-delay: -0.3s;
32-
top: 7px;
33-
left: 37px;
32+
top: 8.75%;
33+
left: 46.25%;
3434
}
3535
.lds-default div:nth-child(5) {
3636
animation-delay: -0.4s;
37-
top: 11px;
38-
left: 22px;
37+
top: 13.75%;
38+
left: 27.5%;
3939
}
4040
.lds-default div:nth-child(6) {
4141
animation-delay: -0.5s;
42-
top: 22px;
43-
left: 11px;
42+
top: 27.5%;
43+
left: 13.75%;
4444
}
4545
.lds-default div:nth-child(7) {
4646
animation-delay: -0.6s;
47-
top: 37px;
48-
left: 7px;
47+
top: 46.25%;
48+
left: 8.75%;
4949
}
5050
.lds-default div:nth-child(8) {
5151
animation-delay: -0.7s;
52-
top: 52px;
53-
left: 11px;
52+
top: 65%;
53+
left: 13.75%;
5454
}
5555
.lds-default div:nth-child(9) {
5656
animation-delay: -0.8s;
57-
top: 62px;
58-
left: 22px;
57+
top: 77.5%;
58+
left: 27.5%;
5959
}
6060
.lds-default div:nth-child(10) {
6161
animation-delay: -0.9s;
62-
top: 66px;
63-
left: 37px;
62+
top: 82.5%;
63+
left: 46.25%;
6464
}
6565
.lds-default div:nth-child(11) {
6666
animation-delay: -1s;
67-
top: 62px;
68-
left: 52px;
67+
top: 77.5%;
68+
left: 65%;
6969
}
7070
.lds-default div:nth-child(12) {
7171
animation-delay: -1.1s;
72-
top: 52px;
73-
left: 62px;
72+
top: 65%;
73+
left: 77.5%;
7474
}
7575
@keyframes lds-default {
7676
0%, 20%, 80%, 100% {

‎src/components/Grid/index.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33
import './style.css'
44

5-
export default function Grid({ color, className, style }) {
5+
export default function Grid({ color, className, style, size }) {
66
const circles = [...Array(9)].map((_, index) => <div key={index} style={{ background: `${color}` }} />)
77

88
return (
9-
<div className={`lds-grid ${className}`} style={{ ...style }}>
9+
<div className={`lds-grid ${className}`} style={{ width: size, height: size, ...style }}>
1010
{circles}
1111
</div>
1212
)
@@ -15,6 +15,8 @@ export default function Grid({ color, className, style }) {
1515
Grid.propTypes = {
1616
/** hex color */
1717
color: PropTypes.string,
18+
/** size in pixel */
19+
size: PropTypes.number,
1820
/** class name */
1921
className: PropTypes.string,
2022
/** style object */
@@ -23,6 +25,7 @@ Grid.propTypes = {
2325

2426
Grid.defaultProps = {
2527
color: '#7f58af',
28+
size: 80,
2629
className: '',
2730
style: {},
2831
}

‎src/components/Grid/style.css‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,55 +6,55 @@
66
}
77
.lds-grid div {
88
position: absolute;
9-
width: 16px;
10-
height: 16px;
9+
width: 20%;
10+
height: 20%;
1111
border-radius: 50%;
1212
background: #fff;
1313
animation: lds-grid 1.2s linear infinite;
1414
}
1515
.lds-grid div:nth-child(1) {
16-
top: 8px;
17-
left: 8px;
16+
top: 10%;
17+
left: 10%;
1818
animation-delay: 0s;
1919
}
2020
.lds-grid div:nth-child(2) {
21-
top: 8px;
22-
left: 32px;
21+
top: 10%;
22+
left: 40%;
2323
animation-delay: -0.4s;
2424
}
2525
.lds-grid div:nth-child(3) {
26-
top: 8px;
27-
left: 56px;
26+
top: 10%;
27+
left: 70%;
2828
animation-delay: -0.8s;
2929
}
3030
.lds-grid div:nth-child(4) {
31-
top: 32px;
32-
left: 8px;
31+
top: 40%;
32+
left: 10%;
3333
animation-delay: -0.4s;
3434
}
3535
.lds-grid div:nth-child(5) {
36-
top: 32px;
37-
left: 32px;
36+
top: 40%;
37+
left: 40%;
3838
animation-delay: -0.8s;
3939
}
4040
.lds-grid div:nth-child(6) {
41-
top: 32px;
42-
left: 56px;
41+
top: 40%;
42+
left: 70%;
4343
animation-delay: -1.2s;
4444
}
4545
.lds-grid div:nth-child(7) {
46-
top: 56px;
47-
left: 8px;
46+
top: 70%;
47+
left: 10%;
4848
animation-delay: -0.8s;
4949
}
5050
.lds-grid div:nth-child(8) {
51-
top: 56px;
52-
left: 32px;
51+
top: 70%;
52+
left: 40%;
5353
animation-delay: -1.2s;
5454
}
5555
.lds-grid div:nth-child(9) {
56-
top: 56px;
57-
left: 56px;
56+
top: 70%;
57+
left: 70%;
5858
animation-delay: -1.6s;
5959
}
6060
@keyframes lds-grid {

‎src/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,16 @@ const SizeProp = () => {
162162
<Ellipsis color="#be97e8" size={40} />
163163
<Ellipsis color="#be97e8" size={20} />
164164
</div>
165+
<div className="block">
166+
<Default color="#be97e8" />
167+
<Default color="#be97e8" size={40} />
168+
<Default color="#be97e8" size={20} />
169+
</div>
170+
<div className="block">
171+
<Grid color="#be97e8" />
172+
<Grid color="#be97e8" size={40} />
173+
<Grid color="#be97e8" size={20} />
174+
</div>
165175
<div style={{ clear: 'both' }}></div>
166176
</div>
167177
)

0 commit comments

Comments
 (0)