Skip to content

Commit

Permalink
update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
Blake Reimer authored and Blake Reimer committed Dec 2, 2022
1 parent a223e9c commit 36132b3
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 25 deletions.
36 changes: 11 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,10 @@
<br />

<div align="center">
<table>
<tr>
<th>Pulse</th>
<th>Elastic</th>
<th>Flashing</th>
<th>Typing</th>
<th>Ping</th>
</tr>
<tr>
<td valign="top"><img src="https://github.com/ApolloEagle/loading-dots/blob/main/src/assets/pulse.gif" height="50px" /></td>
<td valign="top"><img src="https://github.com/ApolloEagle/loading-dots/blob/main/src/assets/elastic.gif" height="50px" /></td>
<td valign="top"><img src="https://github.com/ApolloEagle/loading-dots/blob/main/src/assets/flashing.gif" height="50px" /></td>
<td valign="top"><img src="https://github.com/ApolloEagle/loading-dots/blob/main/src/assets/typing.gif" height="50px" /></td>
<td valign="top"><img src="https://github.com/ApolloEagle/loading-dots/blob/main/src/assets/ping.gif" height="50px" /></td>
</tr>
</table>
<img src="https://github.com/ApolloEagle/loading-dots/blob/main/src/assets/dots.gif" height="100px" />
<p>A component to display loading dots for React Native applications.</p>
<p>Example implementation: <a href="https://codesandbox.io/s/interesting-dewdney-xkez8v">CodeSandbox.io</a></p>
<p>Stylings inspired by <a href="https://github.com/nzbin/three-dots" target="_blank">@nzbin/three-dots</a></p>
<p>Examples: <a href="https://codesandbox.io/s/interesting-dewdney-xkez8v">CodeSandbox.io</a></p>
<p>Animations inspired by <a href="https://github.com/nzbin/three-dots" target="_blank">@nzbin/three-dots</a></p>
</div>

## Installation
Expand Down Expand Up @@ -68,10 +53,11 @@ const styles = StyleSheet.create({

A list of available props to pass into the `<LoadingProps />` component:

| Props | Type | Default | Description |
| ------- | ------ | ------- | ----------------------------------------------------------------------------------- |
| style | String | 'pulse' | Animation style. Available styles: `pulse`, `elastic`, `flashing`, `typing`, `ping` |
| dots | Number | 3 | Number of dots displayed |
| color | String | 'black' | Color of dots |
| size | Number | 10 | Size of dots |
| spacing | Number | 2 | Space between dots |
| Props | Type | Default | Units | Description |
| --------- | ------ | ------- | ----- | ----------------------------------------------------------------------------------- |
| animation | String | 'pulse' | n/a | Animation style. Available styles: `pulse`, `elastic`, `flashing`, `typing`, `ping` |
| dots | Number | 3 | n/a | Number of dots displayed |
| color | String | 'black' | n/a | Color of dots |
| size | Number | 10 | px | Size of dots |
| spacing | Number | 2 | px | Space between dots |
| delay | Number | 260 | ms | Time between dot rendering |
Binary file modified src/assets/dots.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 36132b3

Please sign in to comment.