├── .gitignore ├── LICENSE ├── LICENSE.md ├── README.md ├── img └── loader.gif ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── ColorBar ├── index.js └── style.css ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Amur Khoyetsyan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Amur Khoyetsyan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-js-loader 2 | 3 | ## [demo page](https://amurkhoyetsyan.github.io/smart-loaders/) 4 | 5 | ### Install 6 | 7 | npm i react-js-loader 8 | 9 | loader 10 | 11 |
12 | 13 | ### Documentation 14 | 15 | props 16 | 17 | | Name | Type | 18 | | ------------------- | ------------------ | 19 | | type | String | 20 | | bgColor | String | 21 | | color | String | 22 | | title | String | 23 | | size | Integer | 24 | | LICENSE | [LICENSE](LICENSE) | 25 | 26 |
27 | 28 | | Types Color | Types | Value Example | 29 | | -------------------- | -------- | ------------------------------- | 30 | | rgb | String | rgb(0, 0, 0) or rgb(0%, 0%, 0%) | 31 | | hex | String | #000000 or #000 | 32 | | hsl | String | hsl(0deg 0% 0%) | 33 | | name | String | black | 34 | 35 |
36 | 37 | | Types | 38 | | ------------------- | 39 | | box-rotate-x | 40 | | box-rotate-y | 41 | | box-rotate-z | 42 | | box-rectangular | 43 | | ping-cube | 44 | | heart | 45 | | bubble-scale | 46 | | bubble-top | 47 | | bubble-ping | 48 | | bubble-spin | 49 | | spinner-cub | 50 | | spinner-circle | 51 | | spinner-default | 52 | | ekvalayzer | 53 | | hourglass | 54 | | rectangular-ping | 55 | 56 |
57 | 58 | color and bgColor = rgb or hex 59 | 60 | 61 | ### Example 62 | 63 | import React from 'react'; 64 | 65 | .... 66 | .... 67 | .... 68 | 69 | import Loader from "react-js-loader"; 70 | 71 | .... 72 | .... 73 | .... 74 | 75 | return ( 76 |
77 |
78 |
79 | setColor(color)} /> 80 |
81 |
82 | 83 |
84 |
85 | 86 |
87 |
88 | 89 |
90 |
91 | 92 |
93 |
94 |
95 |
96 | 97 |
98 |
99 | 100 |
101 |
102 | 103 |
104 |
105 | 106 |
107 |
108 |
109 |
110 | 111 |
112 |
113 | 114 |
115 |
116 | 117 |
118 |
119 | 120 |
121 |
122 |
123 |
124 | 125 |
126 |
127 | 128 |
129 |
130 | 131 |
132 |
133 | 134 |
135 |
136 |
137 |
138 | 139 |
140 |
141 | 142 |
143 |
144 |
145 |
146 |
147 | ); -------------------------------------------------------------------------------- /img/loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmurKhoyetsyan/react-js-loader/5ad9d2f8a20fd78937093851be8c5e3ebbf37b21/img/loader.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-js-loader", 3 | "version": "0.1.3", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-js-loader": "^0.1.3", 12 | "react-scripts": "5.0.1", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmurKhoyetsyan/react-js-loader/5ad9d2f8a20fd78937093851be8c5e3ebbf37b21/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmurKhoyetsyan/react-js-loader/5ad9d2f8a20fd78937093851be8c5e3ebbf37b21/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmurKhoyetsyan/react-js-loader/5ad9d2f8a20fd78937093851be8c5e3ebbf37b21/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Amur 2020 3 | * 4 | * React-js-loader by Amur 5 | * https://github.com/AmurKhoyetsyan/react-js-loader 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */ 10 | 11 | * { 12 | padding: 0; 13 | margin: 0; 14 | -webkit-box-sizing: border-box; 15 | -moz-box-sizing: border-box; 16 | box-sizing: border-box; 17 | } 18 | 19 | .App { 20 | width: 100%; 21 | min-height: 100vh; 22 | background-color: #202c39; 23 | display: flex; 24 | flex-direction: column; 25 | flex-wrap: nowrap; 26 | justify-content: center; 27 | align-items: center; 28 | } 29 | 30 | .App .content { 31 | width: 600px; 32 | height: 640px; 33 | display: -webkit-box; 34 | display: -ms-flexbox; 35 | display: flex; 36 | -webkit-box-orient: vertical; 37 | -webkit-box-direction: normal; 38 | -ms-flex-direction: column; 39 | flex-direction: column; 40 | -ms-flex-wrap: nowrap; 41 | flex-wrap: nowrap; 42 | -webkit-box-pack: center; 43 | -ms-flex-pack: center; 44 | justify-content: center; 45 | -webkit-box-align: center; 46 | -ms-flex-align: center; 47 | align-items: center; 48 | } 49 | 50 | .zoom-out { 51 | -webkit-transform: scale(.6); 52 | transform: scale(.6); 53 | } 54 | 55 | .App .row { 56 | display: flex; 57 | flex-direction: row; 58 | flex-wrap: nowrap; 59 | justify-content: center; 60 | align-items: center; 61 | } 62 | 63 | .App .row > .item { 64 | width: 150px; 65 | height: 150px; 66 | display: flex; 67 | flex-direction: column; 68 | flex-wrap: nowrap; 69 | justify-content: center; 70 | align-items: center; 71 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Amur 2020 3 | * 4 | * React-js-loader by Amur 5 | * https://github.com/AmurKhoyetsyan/react-js-loader 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */ 10 | 11 | import React, { useState } from "react"; 12 | import "./App.css"; 13 | import ColorBar from "./ColorBar"; 14 | import Loader from "react-js-loader"; 15 | 16 | const App = props=> { 17 | const [color, setColor] = useState('#FFFFFF'); 18 | 19 | return ( 20 |
21 |
22 |
23 | setColor(color)} /> 24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 |
52 |
53 |
54 | 55 |
56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 | 72 |
73 |
74 | 75 |
76 |
77 | 78 |
79 |
80 |
81 |
82 | 83 |
84 |
85 | 86 |
87 |
88 |
89 |
90 |
91 | ); 92 | } 93 | 94 | export default App; 95 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/ColorBar/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Amur 2020 3 | * 4 | * React-js-loader by Amur 5 | * https://github.com/AmurKhoyetsyan/react-js-loader 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */ 10 | 11 | import React from "react"; 12 | import "./style.css"; 13 | 14 | const ColorBar = props => { 15 | const colors = [ 16 | '#FFFFFF', 17 | '#ef3535', 18 | '#5c2ceb', 19 | '#69f759', 20 | '#ef8905', 21 | '#03a9f4', 22 | '#795548', 23 | '#e91e63', 24 | '#009688' 25 | ]; 26 | 27 | return ( 28 |
29 | { 30 | colors.map((color, index) => { 31 | return ( 32 |
33 |
props.setColor(color)} 39 | >
40 |
41 | ) 42 | }) 43 | } 44 |
45 | ) 46 | } 47 | 48 | export default ColorBar; -------------------------------------------------------------------------------- /src/ColorBar/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Amur 2020 3 | * 4 | * React-js-loader by Amur 5 | * https://github.com/AmurKhoyetsyan/react-js-loader 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */ 10 | 11 | * { 12 | padding: 0; 13 | margin: 0; 14 | -webkit-box-sizing: border-box; 15 | -moz-box-sizing: border-box; 16 | box-sizing: border-box; 17 | } 18 | 19 | .App .parent-color { 20 | padding-left: 0.5rem; 21 | padding-right: 0.5rem; 22 | } 23 | 24 | .App .parent-color .color { 25 | width: 50px; 26 | height: 50px; 27 | cursor: pointer; 28 | background-color: var(--bg); 29 | border-radius: 50%; 30 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Amur 2020 3 | * 4 | * React-js-loader by Amur 5 | * https://github.com/AmurKhoyetsyan/react-js-loader 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */ 10 | 11 | body { 12 | margin: 0; 13 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 14 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 15 | sans-serif; 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-font-smoothing: grayscale; 18 | } 19 | 20 | code { 21 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 22 | monospace; 23 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Amur 2020 3 | * 4 | * React-js-loader by Amur 5 | * https://github.com/AmurKhoyetsyan/react-js-loader 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */ 10 | 11 | import React from 'react'; 12 | import './index.css'; 13 | import App from './App'; 14 | import ReactDOM from 'react-dom/client'; 15 | import reportWebVitals from './reportWebVitals'; 16 | 17 | const root = ReactDOM.createRoot(document.getElementById('root')); 18 | root.render( 19 | 20 | 21 | 22 | ); 23 | 24 | // If you want to start measuring performance in your app, pass a function 25 | // to log results (for example: reportWebVitals(console.log)) 26 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 27 | reportWebVitals(); 28 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------