Skip to content

Commit b595e3d

Browse files
JoshK2JoshK2
authored
Merge branch 'master' into feature/facebook-sizing
2 parents f78dbac + dc23e37 commit b595e3d

10 files changed

Lines changed: 144 additions & 58 deletions

File tree

‎.bitmap‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
22

33
{
4-
"joshk.react-spinners-css/[email protected].0": {
4+
"joshk.react-spinners-css/[email protected].2": {
55
"files": [
66
{
77
"relativePath": "src/components/Circle/index.js",
@@ -19,7 +19,7 @@
1919
"origin": "AUTHORED",
2020
"exported": true
2121
},
22-
"joshk.react-spinners-css/[email protected].0": {
22+
"joshk.react-spinners-css/[email protected].2": {
2323
"files": [
2424
{
2525
"relativePath": "src/components/Default/index.js",
@@ -37,7 +37,7 @@
3737
"origin": "AUTHORED",
3838
"exported": true
3939
},
40-
"joshk.react-spinners-css/[email protected].0": {
40+
"joshk.react-spinners-css/[email protected].2": {
4141
"files": [
4242
{
4343
"relativePath": "src/components/DualRing/index.js",
@@ -55,7 +55,7 @@
5555
"origin": "AUTHORED",
5656
"exported": true
5757
},
58-
"joshk.react-spinners-css/[email protected].0": {
58+
"joshk.react-spinners-css/[email protected].2": {
5959
"files": [
6060
{
6161
"relativePath": "src/components/Ellipsis/index.js",
@@ -73,7 +73,7 @@
7373
"origin": "AUTHORED",
7474
"exported": true
7575
},
76-
"joshk.react-spinners-css/[email protected].0": {
76+
"joshk.react-spinners-css/[email protected].2": {
7777
"files": [
7878
{
7979
"relativePath": "src/components/Facebook/index.js",
@@ -91,7 +91,7 @@
9191
"origin": "AUTHORED",
9292
"exported": true
9393
},
94-
"joshk.react-spinners-css/[email protected].0": {
94+
"joshk.react-spinners-css/[email protected].2": {
9595
"files": [
9696
{
9797
"relativePath": "src/components/Grid/index.js",
@@ -109,7 +109,7 @@
109109
"origin": "AUTHORED",
110110
"exported": true
111111
},
112-
"joshk.react-spinners-css/[email protected].0": {
112+
"joshk.react-spinners-css/[email protected].2": {
113113
"files": [
114114
{
115115
"relativePath": "src/components/Heart/index.js",
@@ -127,7 +127,7 @@
127127
"origin": "AUTHORED",
128128
"exported": true
129129
},
130-
"joshk.react-spinners-css/[email protected].0": {
130+
"joshk.react-spinners-css/[email protected].3": {
131131
"files": [
132132
{
133133
"relativePath": "src/components/Hourglass/index.js",
@@ -145,7 +145,7 @@
145145
"origin": "AUTHORED",
146146
"exported": true
147147
},
148-
"joshk.react-spinners-css/[email protected].0": {
148+
"joshk.react-spinners-css/[email protected].2": {
149149
"files": [
150150
{
151151
"relativePath": "src/components/Orbitals/index.js",
@@ -163,7 +163,25 @@
163163
"origin": "AUTHORED",
164164
"exported": true
165165
},
166-
"joshk.react-spinners-css/[email protected]": {
166+
"joshk.react-spinners-css/[email protected]": {
167+
"files": [
168+
{
169+
"relativePath": "src/components/Ouroboro/index.js",
170+
"test": false,
171+
"name": "index.js"
172+
},
173+
{
174+
"relativePath": "src/components/Ouroboro/style.css",
175+
"test": false,
176+
"name": "style.css"
177+
}
178+
],
179+
"mainFile": "src/components/Ouroboro/index.js",
180+
"trackDir": "src/components/Ouroboro",
181+
"origin": "AUTHORED",
182+
"exported": true
183+
},
184+
"joshk.react-spinners-css/[email protected]": {
167185
"files": [
168186
{
169187
"relativePath": "src/components/Ring/index.js",
@@ -181,7 +199,7 @@
181199
"origin": "AUTHORED",
182200
"exported": true
183201
},
184-
"joshk.react-spinners-css/[email protected].0": {
202+
"joshk.react-spinners-css/[email protected].2": {
185203
"files": [
186204
{
187205
"relativePath": "src/components/Ripple/index.js",
@@ -199,7 +217,7 @@
199217
"origin": "AUTHORED",
200218
"exported": true
201219
},
202-
"joshk.react-spinners-css/[email protected].0": {
220+
"joshk.react-spinners-css/[email protected].2": {
203221
"files": [
204222
{
205223
"relativePath": "src/components/Roller/index.js",
@@ -217,7 +235,7 @@
217235
"origin": "AUTHORED",
218236
"exported": true
219237
},
220-
"joshk.react-spinners-css/[email protected].0": {
238+
"joshk.react-spinners-css/[email protected].2": {
221239
"files": [
222240
{
223241
"relativePath": "src/components/Spinner/index.js",
@@ -235,5 +253,5 @@
235253
"origin": "AUTHORED",
236254
"exported": true
237255
},
238-
"version": "14.3.0"
256+
"version": "14.4.1"
239257
}

‎.circleci/config.yml‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Javascript Node CircleCI 2.0 configuration file
2+
#
3+
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
4+
#
5+
version: 2
6+
jobs:
7+
build:
8+
docker:
9+
# specify the version you desire here
10+
- image: circleci/node:7.10
11+
12+
# Specify service dependencies here if necessary
13+
# CircleCI maintains a library of pre-built images
14+
# documented at https://circleci.com/docs/2.0/circleci-images/
15+
# - image: circleci/mongo:3.4.4
16+
17+
working_directory: ~/repo
18+
19+
steps:
20+
- checkout
21+
22+
# Download and cache dependencies
23+
- restore_cache:
24+
keys:
25+
- v1-dependencies-{{ checksum "package.json" }}
26+
# fallback to using the latest cache if no exact match is found
27+
- v1-dependencies-
28+
29+
- run: npm config set '@bit:registry' https://node.bit.dev && npm install
30+
31+
- save_cache:
32+
paths:
33+
- node_modules
34+
key: v1-dependencies-{{ checksum "package.json" }}
35+
36+
# run build:lib!
37+
- run: npm run build:lib

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<span class="badge-buymeacoffee"><a href="https://ko-fi.com/X8X614J76" title="Donate to this project using Ko-fi"><img src="https://img.shields.io/badge/buy%20me%20a%20coffee-support-%23ff5f5f" alt="Buy Me A Coffee donate button" /></a></span>
99

1010
<p align="center">
11-
<a href="https://bit.dev/joshk/react-spinners-css"><img src="https://i.imagesup.co/images2/1990710a88808ee8914167c74f57e604c5ed91fe.gif"></a>
11+
<a href="https://bit.dev/joshk/react-spinners-css"><img src="https://i.imagesup.co/images2/1d67baaff0ba984979234d95271099843299dda1.gif"></a>
1212
</p>
1313

1414
Amazing collection of React spinners components with pure css.
@@ -41,10 +41,11 @@ Component that accepts `size` prop have a default size in pixel.
4141
| `<Heart/>` | `#7f58af` | `80` | `""` | `{}` |
4242
| `<Hourglass/>` | `#7f58af` | - | `""` | `{}` |
4343
| `<Ring/>` | `#7f58af` | `80` | `""` | `{}` |
44-
| `<Ripple/>` | `#7f58af` | - | `""` | `{}` |
44+
| `<Ripple/>` | `#7f58af` | `80` | `""` | `{}` |
4545
| `<Roller/>` | `#7f58af` | - | `""` | `{}` |
4646
| `<Spinner/>` | `#7f58af` | - | `""` | `{}` |
4747
| `<Orbitals/>` | `#7f58af` | - | `""` | `{}` |
48+
| `<Ouroboro/>` | `#7f58af` | - | `""` | `{}` |
4849

4950

5051
## 📦 Installation

‎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.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-spinners-css",
3-
"version": "1.1.1",
3+
"version": "1.1.2",
44
"private": false,
55
"main": "dist/index.js",
66
"module": "dist/index.js",

‎src/components/Hourglass/index.js‎

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

5-
export default function Hourglass({ color, className, style }) {
5+
export default function Hourglass({ color, size, className, style }) {
66
return (
77
<div className={`lds-hourglass ${className}`} style={{ ...style }}>
8-
<div className="lds-hourglass-after" style={{ background: color }}></div>
8+
<div
9+
className="lds-hourglass-after"
10+
style={{ background: color, 'border-width': size, 'border-height': size }}
11+
></div>
912
</div>
1013
)
1114
}
1215

1316
Hourglass.propTypes = {
1417
/** hex color */
1518
color: PropTypes.string,
19+
/** size in pixel */
20+
size: PropTypes.number,
1621
/** class name */
1722
className: PropTypes.string,
1823
/** style object */
@@ -22,5 +27,6 @@ Hourglass.propTypes = {
2227
Hourglass.defaultProps = {
2328
color: '#7f58af',
2429
className: '',
30+
size: 32,
2531
style: {},
2632
}

‎src/components/Ouroboro/style.css‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
.lds-ouroboro {
22
position: relative;
33
display:inline-block;
4-
height: 46px;
5-
width: 46px;
6-
margin: 1em;
4+
height: 64px;
5+
width: 64px;
6+
margin: 0.5em;
77
border-radius: 50%;
88
overflow:hidden;
99
box-shadow: 0 0 10px rgba(0,0,0,.1) inset, 0 0 25px rgba(0,0,255,0.075);
1010
}
1111

1212
.lds-ouroboro:after {
1313
content: "";
14-
position: absolute;
15-
top: 9px; left: 9px;
14+
position: relative;
15+
top: 15%; left: 15%;
1616
display: block;
17-
height: 28px;
18-
width: 28px;
17+
height: 70%; width:70%;
1918
background: none repeat scroll 0 0 #F2F2F2;
2019
border-radius: 50%;
2120
box-shadow: 0 0 10px rgba(0,0,0,.1);

‎src/components/Ripple/index.js‎

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

5-
export default function Ripple({ color, className, style }) {
6-
const circles = [...Array(2)].map((_, index) => <div key={index} style={{ borderColor: `${color}` }} />)
5+
export default function Ripple({ color, className, style, size }) {
6+
const circles = [...Array(2)].map((_, index) => (
7+
<div
8+
key={index}
9+
style={{
10+
borderColor: `${color}`,
11+
borderWidth: size * 0.05,
12+
}}
13+
/>
14+
))
715

816
return (
9-
<div className={`lds-ripple ${className}`} style={{ ...style }}>
17+
<div className={`lds-ripple ${className}`} style={{ width: size, height: size, ...style }}>
1018
{circles}
1119
</div>
1220
)
@@ -19,10 +27,13 @@ Ripple.propTypes = {
1927
className: PropTypes.string,
2028
/** style object */
2129
style: PropTypes.object,
30+
/** size in pixel */
31+
size: PropTypes.number,
2232
}
2333

2434
Ripple.defaultProps = {
2535
color: '#7f58af',
2636
className: '',
2737
style: {},
38+
size: 80,
2839
}

‎src/components/Ripple/style.css‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,36 @@
11
.lds-ripple {
2-
display: inline-block;
3-
position: relative;
4-
width: 80px;
5-
height: 80px;
6-
}
7-
.lds-ripple div {
8-
position: absolute;
9-
border: 4px solid #fff;
2+
display: inline-block;
3+
position: relative;
4+
width: 80px;
5+
height: 80px;
6+
}
7+
8+
.lds-ripple div {
9+
position: absolute;
10+
border: 4px solid #fff;
11+
opacity: 1;
12+
border-radius: 50%;
13+
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
14+
}
15+
16+
.lds-ripple div:nth-child(2) {
17+
animation-delay: -0.5s;
18+
}
19+
20+
@keyframes lds-ripple {
21+
0% {
22+
top: 45%;
23+
left: 45%;
24+
width: 0;
25+
height: 0;
1026
opacity: 1;
11-
border-radius: 50%;
12-
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
1327
}
14-
.lds-ripple div:nth-child(2) {
15-
animation-delay: -0.5s;
28+
29+
100% {
30+
top: 0px;
31+
left: 0px;
32+
width: 90%;
33+
height: 90%;
34+
opacity: 0;
1635
}
17-
@keyframes lds-ripple {
18-
0% {
19-
top: 36px;
20-
left: 36px;
21-
width: 0;
22-
height: 0;
23-
opacity: 1;
24-
}
25-
100% {
26-
top: 0px;
27-
left: 0px;
28-
width: 72px;
29-
height: 72px;
30-
opacity: 0;
31-
}
32-
}
36+
}

‎src/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,16 @@ const SizeProp = () => {
146146
<Facebook color="#be97e8" />
147147
<Facebook color="#be97e8" size={40} />
148148
<Facebook color="#be97e8" size={20} />
149+
</div>
150+
<div className="block">
151+
<Ripple color="#be97e8" />
152+
<Ripple color="#be97e8" size={40} />
153+
<Ripple color="#be97e8" size={20} />
154+
</div>
155+
<div className="block">
156+
<Hourglass color="#be97e8" />
157+
<Hourglass color="#be97e8" size={24} />
158+
<Hourglass color="#be97e8" size={16} />
149159
</div>
150160
<div style={{ clear: 'both' }}></div>
151161
</div>

0 commit comments

Comments
 (0)