Skip to content

Commit 20e88c1

Browse files
JoshK2JoshK2
committed
update README.md and demo page with new colors
1 parent 361c28b commit 20e88c1

3 files changed

Lines changed: 69 additions & 36 deletions

File tree

‎README.md‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,21 @@
55
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/JoshK2/react-spinners-css/master/LICENSE)
66
[![Twitter Follow](https://img.shields.io/twitter/follow/joshkuttler)](https://twitter.com/JoshKuttler)
77

8-
Amazing collection of pure CSS react spinners components of css spinners for ajax or loading animation based on loading.io.
9-
[Install components and live demo](https://bit.dev/joshk/react-spinners-css)
108
<p align="center">
11-
<a href="https://bit.dev/joshk/react-spinners-css"><img src="https://i.imagesup.co/images2/010e655fd10abc5621d067f8b8ad33c7cac7d840.gif"></a>
9+
<a href="https://bit.dev/joshk/react-spinners-css"><img src="https://i.imagesup.co/images2/e5832341d5d3e440221cf80650042792a99e39f7.gif"></a>
1210
</p>
11+
12+
Amazing collection of pure CSS react spinners components of css spinners for ajax or loading animation based on loading.io.
13+
- 💅No extra CSS imports
14+
- ✂️Zero dependencies
15+
- 📦Spinners can be installing separately
16+
17+
## [Live Demo](https://bit.dev/joshk/react-spinners-css)
18+
19+
Browse components and explore their props with [Bit](https://bit.dev/joshk/react-spinners-css).
20+
Install specific react spinner component with npm, yarn or bit without having to install the whole project.
21+
[Install components and live demo](https://bit.dev/joshk/react-spinners-css)
22+
1323

1424
## 🚀 List of Spinners - PropTypes and Default Props
1525

@@ -89,4 +99,4 @@ You can see the components locally by cloning this repo and doing the following
8999
- For bugs and feature requests, please create an issue.
90100

91101
## 📄 License
92-
[MIT](https://github.com/JoshK2/react-spinners-css/blob/master/LICENSE)
102+
[MIT](https://github.com/JoshK2/react-spinners-css/blob/master/LICENSE)

‎src/app.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
.normal-spinners {
2+
text-align: center;
3+
}
14
.main {
25
text-align: center;
36
width: 564px;

‎src/index.js‎

Lines changed: 52 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,68 +16,87 @@ import {
1616
} from './components'
1717
import './app.css'
1818

19+
const Spinners = () => {
20+
return (
21+
<div className="normal-spinners">
22+
<Circle color="#be97e8" />
23+
<Default color="#be97e8" />
24+
<DualRing color="#be97e8" />
25+
<Ellipsis color="#be97e8" />
26+
<Facebook color="#be97e8" />
27+
<Grid color="#be97e8" />
28+
<Heart color="#be97e8" />
29+
<Hourglass color="#be97e8" />
30+
<Ring color="#be97e8" />
31+
<Ripple color="#be97e8" />
32+
<Roller color="#be97e8" />
33+
<Spinner color="#be97e8" />
34+
</div>
35+
)
36+
}
37+
1938
const ColorProp = () => {
2039
return (
2140
<div className="main">
2241
<h2>Color Property</h2>
2342
<div className="block">
24-
<Circle color="black" />
25-
<Circle color="#de3541" />
43+
<Circle color="#54f1d2" />
44+
<Circle color="#be97e8" />
2645
<Circle />
2746
</div>
2847
<div className="block">
29-
<Default color="black" />
30-
<Default color="#de3541" />
48+
<Default color="#54f1d2" />
49+
<Default color="#be97e8" />
3150
<Default />
3251
</div>
3352
<div className="block">
34-
<DualRing color="black" />
35-
<DualRing color="#de3541" />
53+
<DualRing color="#54f1d2" />
54+
<DualRing color="#be97e8" />
3655
<DualRing />
3756
</div>
3857
<div className="block">
39-
<Ellipsis color="black" />
40-
<Ellipsis color="#de3541" />
58+
<Ellipsis color="#54f1d2" />
59+
<Ellipsis color="#be97e8" />
4160
<Ellipsis />
4261
</div>
4362
<div className="block">
44-
<Facebook color="black" />
45-
<Facebook color="#de3541" />
63+
<Facebook color="#54f1d2" />
64+
<Facebook color="#be97e8" />
4665
<Facebook />
4766
</div>
4867
<div className="block">
49-
<Grid color="black" />
50-
<Grid color="#de3541" />
68+
<Grid color="#54f1d2" />
69+
<Grid color="#be97e8" />
5170
<Grid />
5271
</div>
5372
<div className="block">
54-
<Heart color="black" />
55-
<Heart color="#de3541" />
73+
<Heart color="#54f1d2" />
74+
<Heart color="#be97e8" />
5675
<Heart />
5776
</div>
5877
<div className="block">
59-
<Hourglass color="black" />
60-
<Hourglass color="#de3541" />
78+
<Hourglass color="#54f1d2" />
79+
<Hourglass color="#be97e8" />
6180
<Hourglass />
6281
</div>
6382
<div className="block">
64-
<Ring color="black" />
65-
<Ring color="#de3541" />
83+
<Ring color="#54f1d2" />
84+
<Ring color="#be97e8" />
6685
<Ring />
6786
</div>
6887
<div className="block">
69-
<Ripple color="black" />
70-
<Ripple color="#de3541" />
88+
<Ripple color="#54f1d2" />
89+
<Ripple color="#be97e8" />
7190
<Ripple />
7291
</div>
7392
<div className="block">
74-
<Roller color="black" />
75-
<Roller color="#de3541" />
93+
<Roller color="#54f1d2" />
94+
<Roller color="#be97e8" />
7695
<Roller />
7796
</div>
7897
<div className="block">
79-
<Spinner color="black" />
80-
<Spinner color="#de3541" />
98+
<Spinner color="#54f1d2" />
99+
<Spinner color="#be97e8" />
81100
<Spinner />
82101
</div>
83102
<div style={{ clear: 'both' }}></div>
@@ -90,14 +109,14 @@ const SizeProp = () => {
90109
<div className="main">
91110
<h2>Size Property</h2>
92111
<div className="block">
93-
<Circle />
94-
<Circle size={32} />
95-
<Circle size={16} />
112+
<Circle color="#54f1d2" />
113+
<Circle color="#54f1d2" size={32} />
114+
<Circle color="#54f1d2" size={16} />
96115
</div>
97116
<div className="block">
98-
<Ring />
99-
<Ring size={40} />
100-
<Ring size={20} />
117+
<Ring color="#54f1d2" />
118+
<Ring color="#54f1d2" size={40} />
119+
<Ring color="#54f1d2" size={20} />
101120
</div>
102121
<div style={{ clear: 'both' }}></div>
103122
</div>
@@ -106,8 +125,9 @@ const SizeProp = () => {
106125

107126
const App = () => {
108127
return (
109-
<div className="main">
110-
<h1>React Spinners</h1>
128+
<div>
129+
<h1 style={{textAlign: 'center'}}>React Spinners</h1>
130+
<Spinners />
111131
<ColorProp />
112132
<SizeProp />
113133
</div>

0 commit comments

Comments
 (0)