├── .all-contributorsrc ├── .codesandbox └── tasks.json ├── .devcontainer └── .devcontainer.json ├── .eslintrc.cjs ├── .gitignore ├── .prettierignore ├── .prettierrc.js ├── README.md ├── _third-parts └── react-sketch │ ├── LICENSE │ ├── README.md │ └── src │ ├── SketchField.jsx │ ├── arrow.js │ ├── circle.js │ ├── fabrictool.js │ ├── history.js │ ├── index.js │ ├── line.js │ ├── pan.js │ ├── pencil.js │ ├── rectangle.js │ ├── select.js │ ├── tools.js │ └── utils.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── src ├── App.jsx ├── Gallery │ ├── index.jsx │ ├── insertYourLoaderHere │ │ ├── AmazonLoader.jsx │ │ ├── Article.jsx │ │ ├── ArticleLoader.jsx │ │ ├── AuthorsList.jsx │ │ ├── AvatarWithText.jsx │ │ ├── BarChart.jsx │ │ ├── BlogItem.jsx │ │ ├── BootstrapCardDataTable.jsx │ │ ├── BulletList.jsx │ │ ├── CalendarEventLoader.jsx │ │ ├── CalloutStripLoader.jsx │ │ ├── Card.jsx │ │ ├── CardList.jsx │ │ ├── Catalog.jsx │ │ ├── CatalogMagic.jsx │ │ ├── CategoryLoader.jsx │ │ ├── Chat.jsx │ │ ├── ChatGPT.jsx │ │ ├── CheckboxList.jsx │ │ ├── ClassicPostLoader.jsx │ │ ├── CleanChat.jsx │ │ ├── CleoOne.jsx │ │ ├── Code.jsx │ │ ├── CustomerTestimonial.jsx │ │ ├── DashboardLoader.jsx │ │ ├── DataList.jsx │ │ ├── DataTable.jsx │ │ ├── DevtoCard.jsx │ │ ├── DiscordLoader.jsx │ │ ├── DoorDashFavorite.jsx │ │ ├── EcommerceProduct.jsx │ │ ├── EventsLoader.jsx │ │ ├── Facebook.jsx │ │ ├── FadingLoader.jsx │ │ ├── Form.jsx │ │ ├── ForumPost.jsx │ │ ├── GithubProfile.jsx │ │ ├── GlobalSidebar.jsx │ │ ├── Gmail.jsx │ │ ├── GoogleMap.jsx │ │ ├── Grid.jsx │ │ ├── HackerNewsLoader.jsx │ │ ├── HeadBodyGrid.jsx │ │ ├── HeaderLoader.jsx │ │ ├── HelpLinksLoader.jsx │ │ ├── HistoriesLoader.jsx │ │ ├── HomePage.jsx │ │ ├── ImageGrid.jsx │ │ ├── ImageList.jsx │ │ ├── ImageUpload.jsx │ │ ├── InstaChatlist.jsx │ │ ├── InstaStories.jsx │ │ ├── Instagram.jsx │ │ ├── Invoice.jsx │ │ ├── LinkedIn.jsx │ │ ├── LinkedinFeed.jsx │ │ ├── ListingWithThumbnail.jsx │ │ ├── Medium.jsx │ │ ├── NestedList.jsx │ │ ├── Netflix.jsx │ │ ├── NewFacebook.jsx │ │ ├── News.jsx │ │ ├── NotificationLoader.jsx │ │ ├── PieChart.jsx │ │ ├── ProductDetails.jsx │ │ ├── ProfileCard.jsx │ │ ├── ProfileShow.jsx │ │ ├── ReactTable.jsx │ │ ├── Reddit.jsx │ │ ├── RepeatableTableRows.jsx │ │ ├── ResponsiveArticle.jsx │ │ ├── ResponsiveProduct.jsx │ │ ├── RotatingGallery.jsx │ │ ├── ShoppingLoader.jsx │ │ ├── Sidebar.jsx │ │ ├── SnapchatThread.jsx │ │ ├── Table.jsx │ │ ├── TableLoader.jsx │ │ ├── TaskList.jsx │ │ ├── ThreeDots.jsx │ │ ├── Twitter.jsx │ │ ├── UpworkJobLoader.jsx │ │ ├── UserReviewSkype.jsx │ │ ├── XYChart.jsx │ │ ├── Youtube.jsx │ │ ├── YoutubeFresh.jsx │ │ ├── YoutubeMagic.jsx │ │ └── index.jsx │ └── style.css ├── assets │ ├── background-asset.png │ ├── circle.svg │ ├── clone.svg │ ├── favicon.png │ ├── grid.svg │ ├── help.svg │ ├── react.svg │ ├── rect.svg │ ├── select.svg │ ├── trash.svg │ └── vue.svg ├── components │ ├── Canvas.jsx │ ├── Config.jsx │ ├── Highlighter.jsx │ ├── Layout │ │ └── Header.jsx │ ├── LearnMore.tsx │ ├── Loading.jsx │ ├── SEO.jsx │ ├── Upload │ │ ├── Upload.jsx │ │ ├── UploadSnippet.jsx │ │ ├── constants.jsx │ │ ├── service.jsx │ │ └── style.css │ └── style │ │ ├── Header.css │ │ └── style.css ├── index.jsx └── utils │ ├── getSnapshotFromSVG.js │ ├── index.js │ ├── keyboard.js │ ├── presets.js │ └── template.js ├── static └── share.png ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.codesandbox/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // These tasks will run in order when initializing your CodeSandbox project. 3 | "setupTasks": [ 4 | { 5 | "name": "Install Dependencies", 6 | "command": "pnpm install" 7 | } 8 | ], 9 | 10 | // These tasks can be run from CodeSandbox. Running one will open a log in the app. 11 | "tasks": { 12 | "build": { 13 | "name": "build", 14 | "command": "npm run build" 15 | }, 16 | "dev": { 17 | "name": "dev", 18 | "command": "npm run dev", 19 | "runAtStart": true, 20 | "preview": { 21 | "port": 5173 22 | } 23 | }, 24 | "format": { 25 | "name": "format", 26 | "command": "npm run format" 27 | }, 28 | "start": { 29 | "name": "start", 30 | "command": "npm run start" 31 | }, 32 | "lint": { 33 | "name": "lint", 34 | "command": "npm run lint" 35 | }, 36 | "serve": { 37 | "name": "serve", 38 | "command": "npm run serve" 39 | }, 40 | "clean": { 41 | "name": "clean", 42 | "command": "npm run clean" 43 | }, 44 | "deploy": { 45 | "name": "deploy", 46 | "command": "npm run deploy" 47 | }, 48 | "commit": { 49 | "name": "commit", 50 | "command": "npm run commit" 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /.devcontainer/.devcontainer.json: -------------------------------------------------------------------------------- 1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the 2 | // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node 3 | { 4 | "name": "Node.js & TypeScript", 5 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile 6 | "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye" 7 | 8 | // Features to add to the dev container. More info: https://containers.dev/features. 9 | // "features": {}, 10 | 11 | // Use 'forwardPorts' to make a list of ports inside the container available locally. 12 | // "forwardPorts": [], 13 | 14 | // Use 'postCreateCommand' to run commands after the container is created. 15 | // "postCreateCommand": "yarn install", 16 | 17 | // Configure tool-specific properties. 18 | // "customizations": {}, 19 | 20 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. 21 | // "remoteUser": "root" 22 | } 23 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | "eslint:recommended", 6 | "plugin:@typescript-eslint/recommended", 7 | "plugin:react-hooks/recommended", 8 | ], 9 | ignorePatterns: ["dist", ".eslintrc.cjs"], 10 | parser: "@typescript-eslint/parser", 11 | plugins: ["react-refresh"], 12 | rules: { 13 | "react-refresh/only-export-components": [ 14 | "warn", 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = require('@significa/prettier-config') 2 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Thomas Bolis 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. 22 | 23 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/arrow.js: -------------------------------------------------------------------------------- 1 | /*eslint no-unused-vars: 0*/ 2 | 3 | import FabricCanvasTool from './fabrictool' 4 | 5 | import { fabric } from 'fabric' 6 | 7 | class Arrow extends FabricCanvasTool { 8 | configureCanvas(props) { 9 | let canvas = this._canvas 10 | canvas.isDrawingMode = canvas.selection = false 11 | canvas.forEachObject(o => (o.selectable = o.evented = false)) 12 | this._width = props.lineWidth 13 | this._color = props.lineColor 14 | } 15 | 16 | doMouseDown(o) { 17 | this.isDown = true 18 | let canvas = this._canvas 19 | var pointer = canvas.getPointer(o.e) 20 | var points = [pointer.x, pointer.y, pointer.x, pointer.y] 21 | this.line = new fabric.Line(points, { 22 | strokeWidth: this._width, 23 | fill: this._color, 24 | stroke: this._color, 25 | originX: 'center', 26 | originY: 'center', 27 | selectable: false, 28 | evented: false, 29 | }) 30 | 31 | this.head = new fabric.Triangle({ 32 | fill: this._color, 33 | left: pointer.x, 34 | top: pointer.y, 35 | originX: 'center', 36 | originY: 'center', 37 | height: 3 * this._width, 38 | width: 3 * this._width, 39 | selectable: false, 40 | evented: false, 41 | angle: 90, 42 | }) 43 | 44 | canvas.add(this.line) 45 | canvas.add(this.head) 46 | } 47 | 48 | doMouseMove(o) { 49 | if (!this.isDown) return 50 | let canvas = this._canvas 51 | var pointer = canvas.getPointer(o.e) 52 | this.line.set({ x2: pointer.x, y2: pointer.y }) 53 | this.line.setCoords() 54 | 55 | let x_delta = pointer.x - this.line.x1 56 | let y_delta = pointer.y - this.line.y1 57 | 58 | this.head.set({ 59 | left: pointer.x, 60 | top: pointer.y, 61 | angle: 90 + (Math.atan2(y_delta, x_delta) * 180) / Math.PI, 62 | }) 63 | 64 | canvas.renderAll() 65 | } 66 | 67 | doMouseUp(o) { 68 | this.isDown = false 69 | let canvas = this._canvas 70 | 71 | canvas.remove(this.line) 72 | canvas.remove(this.head) 73 | let arrow = new fabric.Group([this.line, this.head]) 74 | canvas.add(arrow) 75 | } 76 | 77 | doMouseOut(o) { 78 | this.isDown = false 79 | } 80 | } 81 | 82 | export default Arrow 83 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/circle.js: -------------------------------------------------------------------------------- 1 | /*eslint no-unused-vars: 0*/ 2 | 3 | import FabricCanvasTool from './fabrictool' 4 | import { linearDistance } from './utils' 5 | 6 | import { fabric } from 'fabric' 7 | 8 | class Circle extends FabricCanvasTool { 9 | configureCanvas(props) { 10 | let canvas = this._canvas 11 | canvas.isDrawingMode = canvas.selection = false 12 | canvas.forEachObject(o => (o.selectable = o.evented = false)) 13 | this._width = props.lineWidth 14 | this._color = props.lineColor 15 | this._fill = props.fillColor 16 | } 17 | 18 | doMouseDown(o) { 19 | let canvas = this._canvas 20 | this.isDown = true 21 | let pointer = canvas.getPointer(o.e) 22 | ;[this.startX, this.startY] = [pointer.x, pointer.y] 23 | this.circle = new fabric.Circle({ 24 | left: this.startX, 25 | top: this.startY, 26 | originX: 'left', 27 | originY: 'center', 28 | strokeWidth: this._width, 29 | stroke: this._color, 30 | fill: this._fill, 31 | selectable: false, 32 | evented: false, 33 | radius: 1, 34 | }) 35 | canvas.add(this.circle) 36 | } 37 | 38 | doMouseMove(o) { 39 | if (!this.isDown) return 40 | let canvas = this._canvas 41 | let pointer = canvas.getPointer(o.e) 42 | this.circle.set({ 43 | radius: 44 | linearDistance( 45 | { x: this.startX, y: this.startY }, 46 | { x: pointer.x, y: pointer.y } 47 | ) / 2, 48 | angle: 49 | (Math.atan2(pointer.y - this.startY, pointer.x - this.startX) * 180) / 50 | Math.PI, 51 | }) 52 | this.circle.setCoords() 53 | canvas.renderAll() 54 | } 55 | 56 | doMouseUp(o) { 57 | this.isDown = false 58 | } 59 | } 60 | 61 | export default Circle 62 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/fabrictool.js: -------------------------------------------------------------------------------- 1 | /* eslint no-unused-vars: 0 */ 2 | 3 | /** 4 | * "Abstract" like base class for a Canvas tool 5 | */ 6 | class FabricCanvasTool { 7 | constructor(canvas) { 8 | this._canvas = canvas 9 | } 10 | 11 | configureCanvas(props) {} 12 | 13 | doMouseUp(event) {} 14 | 15 | doMouseDown(event) {} 16 | 17 | doMouseMove(event) {} 18 | 19 | doMouseOut(event) {} 20 | } 21 | 22 | export default FabricCanvasTool 23 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/history.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Maintains the history of an object 3 | */ 4 | class History { 5 | constructor(undoLimit = 10, debug = false) { 6 | this.undoLimit = undoLimit 7 | this.undoList = [] 8 | this.redoList = [] 9 | this.current = null 10 | this.debug = debug 11 | } 12 | 13 | /** 14 | * Get the limit of undo/redo actions 15 | * 16 | * @returns {number|*} the undo limit, as it is configured when constructing the history instance 17 | */ 18 | getUndoLimit() { 19 | return this.undoLimit 20 | } 21 | 22 | /** 23 | * Get Current state 24 | * 25 | * @returns {null|*} 26 | */ 27 | getCurrent() { 28 | return this.current 29 | } 30 | 31 | /** 32 | * Keep an object to history 33 | * 34 | * This method will set the object as current value and will push the previous "current" object to the undo history 35 | * 36 | * @param obj 37 | */ 38 | keep(obj) { 39 | try { 40 | this.redoList = [] 41 | if (this.current) { 42 | this.undoList.push(this.current) 43 | } 44 | if (this.undoList.length > this.undoLimit) { 45 | this.undoList.shift() 46 | } 47 | this.current = obj 48 | } finally { 49 | this.print() 50 | } 51 | } 52 | 53 | /** 54 | * Undo the last object, this operation will set the current object to one step back in time 55 | * 56 | * @returns the new current value after the undo operation, else null if no undo operation was possible 57 | */ 58 | undo() { 59 | try { 60 | if (this.current) { 61 | this.redoList.push(this.current) 62 | if (this.redoList.length > this.undoLimit) { 63 | this.redoList.shift() 64 | } 65 | if (this.undoList.length === 0) this.current = null 66 | } 67 | if (this.undoList.length > 0) { 68 | this.current = this.undoList.pop() 69 | return this.current 70 | } 71 | return null 72 | } finally { 73 | this.print() 74 | } 75 | } 76 | 77 | /** 78 | * Redo the last object, redo happens only if no keep operations have been performed 79 | * 80 | * @returns the new current value after the redo operation, or null if no redo operation was possible 81 | */ 82 | redo() { 83 | try { 84 | if (this.redoList.length > 0) { 85 | if (this.current) this.undoList.push(this.current) 86 | this.current = this.redoList.pop() 87 | return this.current 88 | } 89 | return null 90 | } finally { 91 | this.print() 92 | } 93 | } 94 | 95 | /** 96 | * Checks whether we can perform a redo operation 97 | * 98 | * @returns {boolean} 99 | */ 100 | canRedo() { 101 | return this.redoList.length > 0 102 | } 103 | 104 | /** 105 | * Checks whether we can perform an undo operation 106 | * 107 | * @returns {boolean} 108 | */ 109 | canUndo() { 110 | return this.undoList.length > 0 || this.current !== null 111 | } 112 | 113 | /** 114 | * Clears the history maintained, can be undone 115 | */ 116 | clear() { 117 | this.undoList = [] 118 | this.redoList = [] 119 | this.current = null 120 | this.print() 121 | } 122 | 123 | print() { 124 | if (this.debug) { 125 | /* eslint-disable no-console */ 126 | console.log( 127 | this.undoList, 128 | ' -> ' + this.current + ' <- ', 129 | this.redoList.slice(0).reverse() 130 | ) 131 | } 132 | } 133 | } 134 | 135 | export default History 136 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/index.js: -------------------------------------------------------------------------------- 1 | import SketchField from './SketchField' 2 | import Tools from './tools' 3 | 4 | export { SketchField } 5 | export { Tools } 6 | 7 | export default { 8 | SketchField, 9 | Tools, 10 | } 11 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/line.js: -------------------------------------------------------------------------------- 1 | /*eslint no-unused-vars: 0*/ 2 | 3 | import FabricCanvasTool from './fabrictool' 4 | 5 | import { fabric } from 'fabric' 6 | 7 | class Line extends FabricCanvasTool { 8 | configureCanvas(props) { 9 | let canvas = this._canvas 10 | canvas.isDrawingMode = canvas.selection = false 11 | canvas.forEachObject(o => (o.selectable = o.evented = false)) 12 | this._width = props.lineWidth 13 | this._color = props.lineColor 14 | } 15 | 16 | doMouseDown(o) { 17 | this.isDown = true 18 | let canvas = this._canvas 19 | var pointer = canvas.getPointer(o.e) 20 | var points = [pointer.x, pointer.y, pointer.x, pointer.y] 21 | this.line = new fabric.Line(points, { 22 | strokeWidth: this._width, 23 | fill: this._color, 24 | stroke: this._color, 25 | originX: 'center', 26 | originY: 'center', 27 | selectable: false, 28 | evented: false, 29 | }) 30 | canvas.add(this.line) 31 | } 32 | 33 | doMouseMove(o) { 34 | if (!this.isDown) return 35 | let canvas = this._canvas 36 | var pointer = canvas.getPointer(o.e) 37 | this.line.set({ x2: pointer.x, y2: pointer.y }) 38 | this.line.setCoords() 39 | canvas.renderAll() 40 | } 41 | 42 | doMouseUp(o) { 43 | this.isDown = false 44 | } 45 | 46 | doMouseOut(o) { 47 | this.isDown = false 48 | } 49 | } 50 | 51 | export default Line 52 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/pan.js: -------------------------------------------------------------------------------- 1 | /*eslint no-unused-vars: 0*/ 2 | 3 | import FabricCanvasTool from './fabrictool' 4 | 5 | import { fabric } from 'fabric' 6 | 7 | class Pan extends FabricCanvasTool { 8 | configureCanvas(props) { 9 | let canvas = this._canvas 10 | canvas.isDrawingMode = canvas.selection = false 11 | canvas.forEachObject(o => (o.selectable = o.evented = false)) 12 | //Change the cursor to the move grabber 13 | canvas.defaultCursor = 'move' 14 | } 15 | 16 | doMouseDown(o) { 17 | let canvas = this._canvas 18 | this.isDown = true 19 | let pointer = canvas.getPointer(o.e) 20 | this.startX = pointer.x 21 | this.startY = pointer.y 22 | } 23 | 24 | doMouseMove(o) { 25 | if (!this.isDown) return 26 | let canvas = this._canvas 27 | let pointer = canvas.getPointer(o.e) 28 | 29 | canvas.relativePan({ 30 | x: pointer.x - this.startX, 31 | y: pointer.y - this.startY, 32 | }) 33 | canvas.renderAll() 34 | } 35 | 36 | doMouseUp(o) { 37 | this.isDown = false 38 | } 39 | } 40 | 41 | export default Pan 42 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/pencil.js: -------------------------------------------------------------------------------- 1 | import FabricCanvasTool from './fabrictool' 2 | 3 | class Pencil extends FabricCanvasTool { 4 | configureCanvas(props) { 5 | this._canvas.isDrawingMode = true 6 | this._canvas.freeDrawingBrush.width = props.lineWidth 7 | this._canvas.freeDrawingBrush.color = props.lineColor 8 | } 9 | } 10 | 11 | export default Pencil 12 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/rectangle.js: -------------------------------------------------------------------------------- 1 | /*eslint no-unused-vars: 0*/ 2 | 3 | import FabricCanvasTool from './fabrictool' 4 | 5 | import { fabric } from 'fabric' 6 | 7 | class Rectangle extends FabricCanvasTool { 8 | configureCanvas(props) { 9 | let canvas = this._canvas 10 | canvas.isDrawingMode = canvas.selection = false 11 | canvas.forEachObject(o => (o.selectable = o.evented = false)) 12 | this._width = props.lineWidth 13 | this._color = props.lineColor 14 | this._fill = props.fillColor 15 | } 16 | 17 | doMouseDown(o) { 18 | let canvas = this._canvas 19 | this.isDown = true 20 | let pointer = canvas.getPointer(o.e) 21 | this.startX = pointer.x 22 | this.startY = pointer.y 23 | this.rect = new fabric.Rect({ 24 | left: this.startX, 25 | top: this.startY, 26 | originX: 'left', 27 | originY: 'top', 28 | width: pointer.x - this.startX, 29 | height: pointer.y - this.startY, 30 | stroke: this._color, 31 | strokeWidth: this._width, 32 | fill: this._fill, 33 | //fill: 'rgba(255,0,0,0.5)', 34 | transparentCorners: false, 35 | selectable: false, 36 | evented: false, 37 | angle: 0, 38 | }) 39 | canvas.add(this.rect) 40 | } 41 | 42 | doMouseMove(o) { 43 | if (!this.isDown) return 44 | let canvas = this._canvas 45 | let pointer = canvas.getPointer(o.e) 46 | if (this.startX > pointer.x) { 47 | this.rect.set({ left: Math.abs(pointer.x) }) 48 | } 49 | if (this.startY > pointer.y) { 50 | this.rect.set({ top: Math.abs(pointer.y) }) 51 | } 52 | this.rect.set({ width: Math.abs(this.startX - pointer.x) }) 53 | this.rect.set({ height: Math.abs(this.startY - pointer.y) }) 54 | this.rect.setCoords() 55 | canvas.renderAll() 56 | } 57 | 58 | doMouseUp(o) { 59 | this.isDown = false 60 | } 61 | } 62 | 63 | export default Rectangle 64 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/select.js: -------------------------------------------------------------------------------- 1 | /*eslint no-unused-vars: 0*/ 2 | 3 | import FabricCanvasTool from './fabrictool' 4 | 5 | class Select extends FabricCanvasTool { 6 | configureCanvas(props) { 7 | let canvas = this._canvas 8 | canvas.isDrawingMode = false 9 | canvas.selection = true 10 | canvas.forEachObject(o => { 11 | o.selectable = o.evented = true 12 | }) 13 | } 14 | } 15 | 16 | export default Select 17 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/tools.js: -------------------------------------------------------------------------------- 1 | export default { 2 | Circle: 'circle', 3 | Line: 'line', 4 | Arrow: 'arrow', 5 | Pencil: 'pencil', 6 | Rectangle: 'rectangle', 7 | Select: 'select', 8 | Pan: 'pan', 9 | } 10 | -------------------------------------------------------------------------------- /_third-parts/react-sketch/src/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Determine the mouse position 3 | * 4 | * @param event the canvas event 5 | * @returns *[] tuple of position x,y 6 | * @private 7 | */ 8 | export const pointerPosition = event => { 9 | event = event || window.event 10 | var target = event.target || event.srcElement, 11 | style = target.currentStyle || window.getComputedStyle(target, null), 12 | borderLeftWidth = parseInt(style['borderLeftWidth'], 10), 13 | borderTopWidth = parseInt(style['borderTopWidth'], 10), 14 | rect = target.getBoundingClientRect(), 15 | _x = event.clientX - borderLeftWidth - rect.left, 16 | _y = event.clientY - borderTopWidth - rect.top, 17 | _touchX = event.changedTouches 18 | ? event.changedTouches[0].clientX - borderLeftWidth - rect.left 19 | : null, 20 | _touchY = event.changedTouches 21 | ? event.changedTouches[0].clientY - borderTopWidth - rect.top 22 | : null 23 | return [_x || _touchX, _y || _touchY] 24 | } 25 | 26 | /** 27 | * Calculate the distance of two x,y points 28 | * 29 | * @param point1 an object with x,y attributes representing the start point 30 | * @param point2 an object with x,y attributes representing the end point 31 | * 32 | * @returns {number} 33 | */ 34 | export const linearDistance = (point1, point2) => { 35 | let xs = point2.x - point1.x 36 | let ys = point2.y - point1.y 37 | return Math.sqrt(xs * xs + ys * ys) 38 | } 39 | 40 | /** 41 | * Return a random uuid of the form xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx 42 | * @returns {string} 43 | */ 44 | export const uuid4 = () => { 45 | let uuid = '', 46 | ii 47 | for (ii = 0; ii < 32; ii += 1) { 48 | switch (ii) { 49 | case 8: 50 | case 20: 51 | uuid += '-' 52 | uuid += ((Math.random() * 16) | 0).toString(16) 53 | break 54 | case 12: 55 | uuid += '-' 56 | uuid += '4' 57 | break 58 | case 16: 59 | uuid += '-' 60 | uuid += ((Math.random() * 4) | 8).toString(16) 61 | break 62 | default: 63 | uuid += ((Math.random() * 16) | 0).toString(16) 64 | } 65 | } 66 | return uuid 67 | } 68 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Skeleton - Create Content Loader 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-content-loader", 3 | "homepage": "https://danilowoz.github.io/create-content-loader", 4 | "version": "0.1.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc && vite build", 8 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 9 | "preview": "vite preview", 10 | "format": "prettier --write \"**/*.{js,jsx,json,md}\"" 11 | }, 12 | "dependencies": { 13 | "@significa/eslint-config": "0.0.15", 14 | "@significa/prettier-config": "0.0.15", 15 | "classnames": "^2.2.6", 16 | "clipboard": "^2.0.4", 17 | "fabric": "^3.6.3", 18 | "jsdom": "^16.2.1", 19 | "react-click-outside": "3.0.1", 20 | "react-content-loader": "7.0.0", 21 | "react-error-overlay": "^6.0.6", 22 | "react-ga": "^2.7.0", 23 | "react-helmet": "^5.2.1", 24 | "react-live": "^2.2.2", 25 | "react-sketch": "^0.5.1", 26 | "react-syntax-highlighter": "^12.2.1", 27 | "throttle-debounce": "^2.2.1", 28 | "react": "^16.13.0", 29 | "react-dom": "^16.13.0" 30 | }, 31 | "devDependencies": { 32 | "prettier": "^1.19.1", 33 | "@types/react": "^18.2.51", 34 | "@types/react-dom": "^18.2.17", 35 | "@typescript-eslint/eslint-plugin": "^6.20.0", 36 | "@typescript-eslint/parser": "^6.20.0", 37 | "@vitejs/plugin-react": "^4.2.1", 38 | "eslint": "^8.55.0", 39 | "eslint-plugin-react-hooks": "^4.6.0", 40 | "eslint-plugin-react-refresh": "^0.4.5", 41 | "typescript": "^5.2.2", 42 | "vite": "^5.0.12" 43 | }, 44 | "browserslist": [ 45 | ">0.2%", 46 | "not dead", 47 | "not ie <= 11", 48 | "not op_mini all" 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /src/Gallery/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | import ReactGA from 'react-ga' 4 | 5 | import './style.css' 6 | import * as data from './insertYourLoaderHere' 7 | 8 | const renderItem = (item, index) => { 9 | const Component = data[item] 10 | const { name, github, description, filename } = Component.metadata 11 | 12 | if (!name || !github || !description || !filename) return null 13 | 14 | return ( 15 |
16 |
17 | 18 |
19 | 20 |
21 |

22 | {description}{' '} 23 | { 28 | ReactGA.event({ 29 | category: 'Gallery', 30 | action: `click username`, 31 | label: name, 32 | }) 33 | }} 34 | > 35 | by {name} 36 | 37 |

38 | 39 | { 45 | ReactGA.event({ 46 | category: 'Gallery', 47 | action: `view source`, 48 | label: filename, 49 | }) 50 | }} 51 | > 52 | view source 53 | 54 |
55 |
56 | ) 57 | } 58 | 59 | const NewItem = () => ( 60 |
61 | { 66 | ReactGA.event({ 67 | category: 'Gallery', 68 | action: `create a new loader`, 69 | }) 70 | }} 71 | > 72 | Insert your loader 73 | 74 | 75 | 81 | 82 | 83 | 84 | 85 | 86 |
87 | ) 88 | 89 | const Gallery = () => { 90 | const [searchQuery, setSearchQuery] = React.useState('') 91 | const arrData = Object.keys(data) 92 | 93 | const filteredData = arrData.filter(item => { 94 | const Component = data[item] 95 | const { name, github, description } = Component.metadata 96 | 97 | return ( 98 | name.toLowerCase().indexOf(searchQuery) !== -1 || 99 | github.toLowerCase().indexOf(searchQuery) !== -1 || 100 | description.toLowerCase().indexOf(searchQuery) !== -1 101 | ) 102 | }) 103 | 104 | return ( 105 |
106 |
107 |

108 | {filteredData.length} results from community 109 |

110 | 111 | setSearchQuery(value)} 115 | /> 116 |
117 | 121 |
122 | ) 123 | } 124 | 125 | export default Gallery 126 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/AmazonLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const AmazonLoader = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | ) 36 | } 37 | 38 | AmazonLoader.metadata = { 39 | name: 'Sarah Ann Garcia', 40 | github: 'sgarcia30', 41 | description: 'This is an Amazon sample product.', // Little tagline 42 | filename: 'AmazonLoader', 43 | } 44 | 45 | export default AmazonLoader 46 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Article.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Article = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | 15 | Article.metadata = { 16 | name: 'RoyalBhati', 17 | github: 'royalbhati', 18 | description: 'Simple Article', 19 | filename: 'Article', 20 | } 21 | 22 | export default Article 23 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ArticleLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ArticleLoader = props => ( 5 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ) 45 | 46 | ArticleLoader.metadata = { 47 | name: 'Sridhar Easwaran', 48 | github: 'sridhareaswaran', 49 | description: 'Article or News', 50 | filename: 'ArticleLoader', 51 | } 52 | 53 | export default ArticleLoader 54 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/AuthorsList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const AuthorsList = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ) 25 | 26 | AuthorsList.metadata = { 27 | name: 'BYIRINGIRO Emmanuel', // My name 28 | github: 'emmbyiringiro', // Github username 29 | description: ' Authors/posts list style ', // Loader description 30 | filename: 'AuthorsList', // filename of your loader 31 | } 32 | 33 | export default AuthorsList 34 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/AvatarWithText.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const AvatarWithText = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | 15 | AvatarWithText.metadata = { 16 | name: 'Akash Bambhaniya', 17 | github: 'Akashnb', // Github username 18 | description: 'Avatar With Text (circle)', 19 | filename: 'AvatarWithText', // filename of your loader 20 | } 21 | 22 | export default AvatarWithText 23 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/BarChart.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const BarChart = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | } 15 | 16 | BarChart.metadata = { 17 | name: 'Phuong Dao', 18 | github: 'dao-phuong', 19 | description: 'Bar Chart', 20 | filename: 'BarChart', 21 | } 22 | 23 | export default BarChart 24 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/BlogItem.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const BlogItem = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | ) 12 | 13 | BlogItem.metadata = { 14 | name: 'RJavlonbek', 15 | github: 'RJavlonbek', 16 | description: 'Blog item', 17 | filename: 'BlogItem', 18 | } 19 | 20 | export default BlogItem 21 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/BootstrapCardDataTable.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const BootstrapCardDataTable = props => { 5 | return ( 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 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 | BootstrapCardDataTable.metadata = { 68 | name: 'Shaheer Ali', 69 | github: 'itsmeshaheerali', 70 | description: 71 | 'This loader exactly fit inside your bootrstrap card component no override happens like existing DataTable Loader', 72 | filename: 'BootstrapCardDataTable', 73 | } 74 | 75 | export default BootstrapCardDataTable 76 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/BulletList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const BulletList = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | 17 | BulletList.metadata = { 18 | name: 'DaniloWoz', 19 | github: 'danilowoz', 20 | description: 'Bullet list', 21 | filename: 'BulletList', 22 | } 23 | 24 | export default BulletList 25 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/CalendarEventLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const CalendarEventLoader = props => { 5 | return ( 6 | 13 | {/* Date */} 14 | {/* Event name */} 15 | {/* Event details */} 16 | 17 | ) 18 | } 19 | 20 | CalendarEventLoader.metadata = { 21 | name: 'Erika', 22 | github: 'elixirika', 23 | description: 'Loader for calendar events', 24 | filename: 'CalendarEventLoader', 25 | } 26 | 27 | export default CalendarEventLoader 28 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/CalloutStripLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const CalloutStripLoader = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | ) 13 | } 14 | 15 | CalloutStripLoader.metadata = { 16 | name: 'Deepak Kumar Vellingiri', // My name 17 | github: 'dkvellin', // Github username 18 | description: 'Callout strip', // Little tagline 19 | filename: 'CalloutStripLoader', // filename of your loader 20 | } 21 | 22 | export default CalloutStripLoader 23 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Card = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ) 17 | } 18 | 19 | Card.metadata = { 20 | name: 'PhátMai', // My name 21 | github: 'lPaths', // Github username 22 | description: 'Card', // Little tagline 23 | filename: 'Card', // filename of your loader 24 | } 25 | 26 | export default Card 27 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/CardList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const CardList = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | 17 | export default CardList 18 | 19 | CardList.metadata = { 20 | name: 'Rivky Bleier', 21 | github: 'RivkyB', 22 | description: 'Simple Card List', 23 | filename: 'CardList', 24 | } 25 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Catalog.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Catalog = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | ) 44 | 45 | Catalog.metadata = { 46 | name: 'Afrizal Fikri', 47 | github: 'koneko096', // Github username 48 | description: 'Catalog', 49 | filename: 'Catalog', // filename of your loader 50 | } 51 | 52 | export default Catalog 53 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/CatalogMagic.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const CatalogMagic = ({ 5 | width = 1366, 6 | heading = { width: 140, height: 24 }, 7 | row = 2, 8 | column = 5, 9 | padding = 12, 10 | borderRadius = 4, 11 | ...props 12 | }) => { 13 | const list = [] 14 | 15 | let height 16 | 17 | for (let i = 1; i <= row; i++) { 18 | for (let j = 0; j < column; j++) { 19 | const itemWidth = (width - padding * (column + 1)) / column 20 | 21 | const x = padding + j * (itemWidth + padding) 22 | 23 | const height1 = itemWidth 24 | 25 | const height2 = 20 26 | 27 | const height3 = 20 28 | 29 | const space = 30 | padding + height1 + (padding / 2 + height2) + height3 + padding * 4 31 | 32 | const y1 = padding + heading.height + padding * 2 + space * (i - 1) 33 | 34 | const y2 = y1 + padding + height1 35 | 36 | const y3 = y2 + padding / 2 + height2 37 | 38 | list.push( 39 | <> 40 | 48 | 49 | 57 | 58 | ) 59 | 60 | if (i === row) { 61 | height = y3 + height3 62 | } 63 | } 64 | } 65 | 66 | return ( 67 | 73 | {heading && ( 74 | 82 | )} 83 | {list} 84 | 85 | ) 86 | } 87 | 88 | CatalogMagic.metadata = { 89 | name: 'I am Doong - I come from Việt Nam', 90 | github: 'toiladoong', 91 | description: 'CatalogMagic', 92 | filename: 'CatalogMagic', 93 | } 94 | 95 | export default CatalogMagic 96 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/CategoryLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import ContentLoader from "react-content-loader" 3 | 4 | const CategoryLoader = (props) => ( 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ) 25 | 26 | CategoryLoader.metadata = { 27 | name: "Nitish Sharma", 28 | github: "Nitz2611", 29 | description: "Category with image and description", 30 | filename: "CategoryLoader" 31 | } 32 | 33 | export default CategoryLoader 34 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Chat.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Chat = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ) 18 | } 19 | 20 | Chat.metadata = { 21 | name: 'Daniel Eslava', // My name 22 | github: 'Eslavadev', // Github username 23 | description: 'Generic Chat', // Little tagline 24 | filename: 'Chat', // filename of your loader 25 | } 26 | 27 | export default Chat 28 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ChatGPT.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import ContentLoader from "react-content-loader"; 3 | 4 | const ChatGPT = (props) => { 5 | const [theme, setTheme] = useState('light'); 6 | 7 | useEffect(() => { 8 | const storedTheme = localStorage.getItem('preferredDarkMode') === 'true' ? 'dark' : 'light'; 9 | setTheme(storedTheme); 10 | }, []); 11 | 12 | const backgroundColor = theme === 'dark' ? '#1e293b ' : '#CCFAF9'; 13 | const foregroundColor = theme === 'dark' ? '#155e75 ' : '#2C3E50'; 14 | return ( 15 | 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | }; 28 | 29 | ChatGPT.metadata = { 30 | name: "HAIDER Ali", // My name 31 | github: "https://github.com/HaiderAli170", // Github username 32 | description: "Chat GPT", // Little tagline 33 | filename: "ChatGPT", // filename of your loader 34 | }; 35 | 36 | export default ChatGPT; 37 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/CheckboxList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const CheckboxList = props => ( 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ) 24 | 25 | CheckboxList.metadata = { 26 | name: 'Manuela Garcia', 27 | github: 'ManuelaGar', 28 | description: 'This is a checkbox list loader.', 29 | filename: 'CheckboxList', 30 | } 31 | 32 | export default CheckboxList 33 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ClassicPostLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ClassicPostLoader = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | ClassicPostLoader.metadata = { 22 | name: 'Emrah Akcelik', 23 | github: 'emrakc', 24 | description: 'Classic Post Loader', 25 | filename: 'ClassicPostLoader', 26 | } 27 | 28 | export default ClassicPostLoader 29 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/CleanChat.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const CleanChat = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | CleanChat.metadata = { 18 | name: 'Pablo Maribondo', 19 | github: 'pablomaribondo', 20 | description: 'Clean Chat', 21 | filename: 'CleanChat', 22 | } 23 | 24 | export default CleanChat 25 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/CleoOne.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const CleoOne = ({ ...rest }) => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ) 18 | 19 | CleoOne.metadata = { 20 | name: 'Yusuf Özlü', 21 | github: 'ozluy', 22 | description: 'Dashboard strategy item on CLEO.one(https://cleo.one).', 23 | filename: 'CleoOne', 24 | } 25 | 26 | export default CleoOne 27 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Code.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Code = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | 17 | Code.metadata = { 18 | name: 'DaniloWoz', 19 | github: 'danilowoz', 20 | description: 'Code style', 21 | filename: 'Code', 22 | } 23 | 24 | export default Code 25 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/CustomerTestimonial.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const CustomerTestimonial = props => { 5 | return ( 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ) 31 | } 32 | 33 | CustomerTestimonial.metadata = { 34 | name: 'Pranay Binju', 35 | github: 'pranaybinju', 36 | description: 'Customer Testimonial Skeleton', 37 | filename: 'CustomerTestimonial', 38 | } 39 | 40 | export default CustomerTestimonial 41 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/DashboardLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const DashboardLoader = props => ( 5 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 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 | DashboardLoader.metadata = { 78 | name: 'Sridhar Easwaran', 79 | github: 'sridhareaswaran', 80 | description: 'Dashboard pages', 81 | filename: 'DashboardLoader', 82 | } 83 | 84 | export default DashboardLoader 85 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/DataList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const DataList = props => { 5 | return ( 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ) 29 | } 30 | 31 | DataList.metadata = { 32 | name: 'Bilal Ahmed', 33 | github: 'bilal-ahmed-dev', 34 | description: 'Simple CRUD Data in Table format', 35 | filename: 'DataList', 36 | } 37 | 38 | export default DataList 39 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/DataTable.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const DataTable = props => ( 5 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 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 | DataTable.metadata = { 77 | name: 'Mohd Arif Un', 78 | github: 'arif-un', 79 | description: 'Data Table skeleton', 80 | filename: 'DataTable', 81 | } 82 | 83 | export default DataTable 84 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/DevtoCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const DevtoCard = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ) 13 | 14 | DevtoCard.metadata = { 15 | name: 'RoyalBhati', 16 | github: 'royalbhati', 17 | description: 'Dev.to card', 18 | filename: 'DevtoCard', 19 | } 20 | 21 | export default DevtoCard 22 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/DoorDashFavorite.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const DoorDashFavorite = props => ( 5 | 13 | 14 | 15 | 16 | 17 | ) 18 | 19 | DoorDashFavorite.metadata = { 20 | name: 'Nic Bovee', // My name 21 | github: 'ghettifish', // Github username 22 | description: 'A simple favorite from the DoorDash local favorites.', // Little tagline 23 | filename: 'DoorDashFavorite', // filename of your loader 24 | } 25 | 26 | export default DoorDashFavorite 27 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/EcommerceProduct.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const EcommerceProduct = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ) 20 | 21 | EcommerceProduct.metadata = { 22 | name: 'Muhammd Bilal', 23 | github: 'bilalbutt044', 24 | description: 'Ecommerce products and category', 25 | filename: 'EcommerceProduct', 26 | } 27 | 28 | export default EcommerceProduct 29 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/EventsLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const EventsLoader = props => ( 5 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ) 28 | 29 | EventsLoader.metadata = { 30 | name: 'Sridhar Easwaran', 31 | github: 'sridhareaswaran', 32 | description: 'Events', 33 | filename: 'EventsLoader', 34 | } 35 | 36 | export default EventsLoader 37 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Facebook.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const FacebookStyle = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | 15 | FacebookStyle.metadata = { 16 | name: 'DaniloWoz', 17 | github: 'danilowoz', 18 | description: 'Facebook style', 19 | filename: 'Facebook', 20 | } 21 | 22 | export default FacebookStyle 23 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/FadingLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const FadingLoader = () => { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 |
13 | ) 14 | } 15 | 16 | const FadingLoaderCard1 = () => { 17 | return ( 18 | 24 | 25 | 26 | 27 | 28 | ) 29 | } 30 | 31 | const FadingLoaderCard2 = () => { 32 | return ( 33 | 39 | 40 | 41 | 42 | 43 | ) 44 | } 45 | 46 | const FadingLoaderCard3 = () => { 47 | return ( 48 | 54 | 55 | 56 | 57 | 58 | ) 59 | } 60 | 61 | const FadingLoaderCard4 = () => { 62 | return ( 63 | 69 | 70 | 71 | 72 | 73 | ) 74 | } 75 | 76 | const FadingLoaderCard5 = () => { 77 | return ( 78 | 84 | 85 | 86 | 87 | 88 | ) 89 | } 90 | 91 | FadingLoader.metadata = { 92 | name: 'Nikhil Anand', // My name 93 | github: 'anandnkhl', // Github username 94 | description: 'Loader that fades downwards', // Little tagline 95 | filename: 'FadingLoader', // filename of your loader 96 | } 97 | 98 | export default FadingLoader 99 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Form.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Form = props => { 5 | return ( 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ) 27 | } 28 | 29 | Form.metadata = { 30 | name: 'Chris Fulgencio', // Contributer 31 | github: 'fulgencc', // Github username 32 | description: 'Small form', // Little tagline 33 | filename: 'Form', // filename 34 | } 35 | 36 | export default Form 37 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ForumPost.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ForumPost = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | } 15 | 16 | ForumPost.metadata = { 17 | name: 'Aditi Tipnis', // My name 18 | github: 'adititipnis', // Github username 19 | description: 'Forum Post', // Little tagline 20 | filename: 'ForumPost', // filename of your loader 21 | } 22 | 23 | export default ForumPost 24 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/GithubProfile.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const GithubProfile = props => { 5 | return ( 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | ) 40 | } 41 | 42 | GithubProfile.metadata = { 43 | name: 'Nikhil Anand', // My name 44 | github: 'anandnkhl', // Github username 45 | description: 'Latest Github Profile', // Little tagline 46 | filename: 'GithubProfile', // filename of your loaderr 47 | } 48 | 49 | export default GithubProfile 50 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/GlobalSidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const GlobalSidebar = props => { 5 | return ( 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ) 41 | } 42 | 43 | GlobalSidebar.metadata = { 44 | name: 'Arfath Tade', // My name 45 | github: 'arfath77', // Github username 46 | description: 47 | 'Global sidebar with tabs containig search bar and list of options', // Little tagline 48 | filename: 'GlobalSidebar', // filename of your loader 49 | } 50 | 51 | export default GlobalSidebar 52 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Gmail.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const GmailLoader = props => { 5 | return ( 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ) 29 | } 30 | 31 | GmailLoader.metadata = { 32 | name: 'Caio Davi', 33 | github: 'caio-davi', 34 | description: 'Gmail Style', 35 | filename: 'Gmail', 36 | } 37 | 38 | export default GmailLoader 39 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/GoogleMap.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const GoogleMap = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | GoogleMap.metadata = { 18 | name: 'Ali Daghighi', // My name 19 | github: 'alidaghighi', // Github username 20 | description: 'Google Map share location with contact', // Little tagline 21 | filename: 'GoogleMap', // filename of your loader 22 | } 23 | 24 | export default GoogleMap 25 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Grid.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Grid = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | Grid.metadata = { 18 | name: 'baptiste fkt', 19 | github: 'baptistefkt', 20 | description: 'Three column grid layout', 21 | filename: 'Grid', 22 | } 23 | 24 | export default Grid 25 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/HackerNewsLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const HackerNewsLoader = props => ( 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ) 21 | 22 | HackerNewsLoader.metadata = { 23 | name: 'Justin Irabor', 24 | github: 'vunderkind', 25 | description: 'A loading skeleton for your HackerNews clone.', 26 | filename: 'HackerNewsLoader', 27 | } 28 | 29 | export default HackerNewsLoader 30 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/HeadBodyGrid.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const HeadBodyGrid = ({ ...rest }) => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | ) 12 | 13 | HeadBodyGrid.metadata = { 14 | name: 'Didier Munezero', 15 | github: 'didiermunezero', 16 | description: 'Grid for content of head and body', 17 | filename: 'HeadBodyGrid', 18 | } 19 | 20 | export default HeadBodyGrid 21 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/HeaderLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const HeaderLoader = props => { 5 | return ( 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ) 20 | } 21 | 22 | HeaderLoader.metadata = { 23 | name: 'Jose Romero', // My name 24 | github: 'JosenRomero', // Github username 25 | description: 'Simple Header', // Little tagline 26 | filename: 'HeaderLoader', // filename of your loader 27 | } 28 | 29 | export default HeaderLoader 30 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/HelpLinksLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const HelpLinksLoader = props => ( 5 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ) 29 | 30 | HelpLinksLoader.metadata = { 31 | name: 'Sridhar Easwaran', 32 | github: 'sridhareaswaran', 33 | description: 'HelpLinks', 34 | filename: 'HelpLinksLoader', 35 | } 36 | 37 | export default HelpLinksLoader 38 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/HistoriesLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const HistoriesLoader = props => ( 5 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ) 27 | 28 | HistoriesLoader.metadata = { 29 | name: 'Alan Hurtarte', // My name 30 | github: 'kenny08gt', // Github username 31 | description: 'Instagram histories. Picture + username', // Little tagline 32 | filename: 'HistoriesLoader', // filename of your loader 33 | } 34 | 35 | export default HistoriesLoader 36 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const HomePage = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | ) 30 | 31 | HomePage.metadata = { 32 | name: 'JAvlonbek Rakhimberdiev', // My name 33 | github: 'RJavlonbek', // Github username 34 | description: 'This is a placeholder for the home page of my Fintech project', // Little tagline 35 | filename: 'HomePage', // filename of your loader 36 | } 37 | 38 | export default HomePage 39 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ImageGrid.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ImageGrid = props => ( 5 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | ) 30 | 31 | ImageGrid.metadata = { 32 | name: 'Hassan Tijani.A', 33 | github: 'surepeps', 34 | description: 'Image Grid with Pagination', 35 | filename: 'ImageGrid', 36 | } 37 | 38 | export default ImageGrid 39 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ImageList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Loader = props => { 5 | let height, width 6 | switch (props.screen) { 7 | case 'mobile': { 8 | height = '100' 9 | width = '400' 10 | break 11 | } 12 | case 'desktop': { 13 | height = '100' 14 | width = '1060' 15 | break 16 | } 17 | case 'large-screen': { 18 | height = '150' 19 | width = '1920' 20 | break 21 | } 22 | default: { 23 | height = '100' 24 | width = '1060' 25 | break 26 | } 27 | } 28 | return ( 29 | 35 | {props.imageType === 'circle' ? ( 36 | 37 | ) : ( 38 | 39 | )} 40 | 41 | 42 | 43 | 44 | ) 45 | } 46 | 47 | const ImageList = props => ( 48 | 49 | {Array(5) 50 | .fill('') 51 | .map((e, i) => ( 52 | 58 | ))} 59 | 60 | ) 61 | 62 | ImageList.metadata = { 63 | name: 'Gaurav Agarwal', 64 | github: 'gauravagarwal2704', 65 | description: 'List with image (rectangle/circle)', 66 | filename: 'ImageList', 67 | } 68 | 69 | export default ImageList 70 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ImageUpload.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ImageLoader = props => { 5 | return ( 6 | 14 | 15 | 16 | 17 | ) 18 | } 19 | 20 | ImageLoader.metadata = { 21 | name: 'Agustin Ramos Peruzzo', 22 | github: 'agustinramos', 23 | description: 'Loader used in upload image process', 24 | filename: 'ImageUpload', 25 | } 26 | 27 | export default ImageLoader 28 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/InstaChatlist.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const InstaChatlist = props => { 5 | return ( 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ) 25 | } 26 | 27 | InstaChatlist.metadata = { 28 | name: 'Ritik Dixit', 29 | github: 'ritikdixit1', 30 | description: 'Instagram chat list', 31 | filename: 'InstaChatlist', 32 | } 33 | 34 | export default InstaChatlist 35 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/InstaStories.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const InstaStories = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | ) 13 | } 14 | 15 | InstaStories.metadata = { 16 | name: 'LuisaBFS', 17 | github: 'luisabfs', 18 | description: 'Insta Stories', 19 | filename: 'InstaStories', 20 | } 21 | 22 | export default InstaStories 23 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Instagram.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const InstagramStyle = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | ) 12 | 13 | InstagramStyle.metadata = { 14 | name: 'DaniloWoz', 15 | github: 'danilowoz', 16 | description: 'Instagram style', 17 | filename: 'Instagram', 18 | } 19 | 20 | export default InstagramStyle 21 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Invoice.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Invoice = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ) 33 | } 34 | 35 | Invoice.metadata = { 36 | name: 'danielerota', 37 | github: 'danielerota', 38 | description: 'Invoice', 39 | filename: 'Invoice', 40 | } 41 | 42 | export default Invoice 43 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/LinkedIn.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const LinkedInStyle = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | LinkedInStyle.metadata = { 19 | name: 'Victoria Mei', 20 | github: 'vm930', 21 | description: 'LinkedIn Style', 22 | filename: 'LinkedIn', 23 | } 24 | 25 | export default LinkedInStyle 26 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/LinkedinFeed.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const LinkedinFeed = props => { 5 | return ( 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ) 23 | } 24 | 25 | LinkedinFeed.metadata = { 26 | name: 'Ritik Dixit', 27 | github: 'ritikdixit1', 28 | description: 'LinkedIn Feed', 29 | filename: 'LinkedinFeed', 30 | } 31 | 32 | export default LinkedinFeed 33 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ListingWithThumbnail.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ListingWithThumbnail = props => { 5 | return ( 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ) 24 | } 25 | 26 | ListingWithThumbnail.metadata = { 27 | name: 'Rituraj ratan', 28 | github: 'riturajratan', 29 | description: 'Listing with thumbnail', 30 | filename: 'ListingWithThumbnail', 31 | } 32 | 33 | export default ListingWithThumbnail 34 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Medium.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Medium = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ) 15 | 16 | Medium.metadata = { 17 | name: 'DaniloWoz', 18 | github: 'danilowoz', 19 | description: 'Medium', 20 | filename: 'Medium', 21 | } 22 | 23 | export default Medium 24 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/NestedList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const NestedList = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | 15 | NestedList.metadata = { 16 | name: 'DaniloWoz', 17 | github: 'danilowoz', 18 | description: 'Nested list', 19 | filename: 'NestedList', 20 | } 21 | 22 | export default NestedList 23 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Netflix.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const NetflixLoader = props => { 5 | // Get values from props 6 | // const { rows, columns, coverHeight, coverWidth, padding, speed } = props; 7 | 8 | // Hardcoded values 9 | const rows = 2 10 | const columns = 5 11 | const coverHeight = 85 12 | const coverWidth = 65 13 | const padding = 5 14 | const speed = 1 15 | 16 | const coverHeightWithPadding = coverHeight + padding 17 | const coverWidthWithPadding = coverWidth + padding 18 | const initial = 35 19 | const covers = Array(columns * rows).fill(1) 20 | 21 | return ( 22 | 30 | 38 | 39 | {covers.map((g, i) => { 40 | let vy = Math.floor(i / columns) * coverHeightWithPadding + initial 41 | let vx = (i * coverWidthWithPadding) % (columns * coverWidthWithPadding) 42 | return ( 43 | 52 | ) 53 | })} 54 | 55 | ) 56 | } 57 | 58 | NetflixLoader.metadata = { 59 | name: 'Pratik Pathak', 60 | github: 'PathakPratik', 61 | description: 'Netflix Style Dynamic', 62 | filename: 'Netflix', 63 | } 64 | 65 | export default NetflixLoader 66 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/NewFacebook.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const NewFacebookLoader = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | NewFacebookLoader.metadata = { 18 | name: 'Ines Guerrero Sirker', 19 | github: 'inesgs12', 20 | description: 'Edited Facebook', 21 | filename: 'NewFacebook', 22 | } 23 | 24 | export default NewFacebookLoader 25 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/News.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const News = props => ( 5 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ) 21 | 22 | News.metadata = { 23 | name: 'Arthur Falcão', 24 | github: 'arthurfalcao', 25 | description: 'News List', 26 | filename: 'News', 27 | } 28 | 29 | export default News 30 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/NotificationLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const NotificationLoader = props => { 5 | return ( 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | ) 42 | } 43 | 44 | NotificationLoader.metadata = { 45 | name: 'Sridhar Easwaran', 46 | github: 'sridhareaswaran', 47 | description: 'Notification section', 48 | filename: 'NotificationLoader', 49 | } 50 | 51 | export default NotificationLoader 52 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/PieChart.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const PieChart = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | PieChart.metadata = { 22 | name: 'Sarah Watanabe', //Names 23 | github: 'swatana3', //github username 24 | description: 'Pie chart.', // Little tagline 25 | filename: 'PieChart', //filename 26 | } 27 | 28 | export default PieChart 29 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ProductDetails.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ProductDetails = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ) 20 | } 21 | 22 | ProductDetails.metadata = { 23 | name: 'Mohd Arif Uddin', // My name 24 | github: 'Arif-un', // Github username 25 | description: 'E-Commerce / Online Shop Product Details page', // Little tagline 26 | filename: 'ProductDetails', // filename of your loader 27 | } 28 | 29 | export default ProductDetails 30 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ProfileCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ProfileCard = props => { 5 | return ( 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | ) 26 | } 27 | 28 | ProfileCard.metadata = { 29 | name: 'René Hinojosa', 30 | github: 'rene-ph', 31 | description: 'Profile Card', 32 | filename: 'ProfileCard', 33 | } 34 | 35 | export default ProfileCard 36 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ProfileShow.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ProfileShow = props => ( 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ) 23 | 24 | ProfileShow.metadata = { 25 | name: 'Dhruvit Galoriya', // My name 26 | github: 'dhruvgaloriya', // Github username 27 | description: 'Show Profile Page', // Little tagline 28 | filename: 'ProfileShow', // filename of your loader 29 | } 30 | 31 | export default ProfileShow 32 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ReactTable.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ReactTable = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | ) 26 | } 27 | 28 | ReactTable.metadata = { 29 | name: 'Fouad Khatib', // My name 30 | github: 'fouadkb', // Github username 31 | description: 'React-table with Pagination and search', // Little tagline 32 | filename: 'ReactTable', // filename of your loader 33 | } 34 | 35 | export default ReactTable 36 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Reddit.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Reddit = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | } 15 | 16 | Reddit.metadata = { 17 | name: 'Sammy Baraka', // My name 18 | github: 'sbaraka', // Github username 19 | description: 'Reddit post', // Little tagline 20 | filename: 'Reddit', // filename of your loader 21 | } 22 | 23 | export default Reddit 24 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/RepeatableTableRows.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const RepeatableTableRows = props => { 5 | const { rows = 5 } = props 6 | const rowHeight = 60 7 | 8 | return ( 9 | 10 | {new Array(rows).fill(' ').map((el, index) => { 11 | const contentVerticalPosition = contentHeight => 12 | rows > 1 ? contentHeight + rowHeight * index : contentHeight 13 | return ( 14 | 15 | 23 | 31 | 39 | 47 | 54 | 55 | ) 56 | })} 57 | 58 | ) 59 | } 60 | RepeatableTableRows.metadata = { 61 | name: 'Lukas Werner', 62 | github: 'sherpaPSX', 63 | description: 64 | 'Repeatable table rows. You can easily define number of rows in props and generate then in one svg', 65 | filename: 'RepeatableTableRows', 66 | } 67 | 68 | export default RepeatableTableRows 69 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ResponsiveArticle.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ResponsiveArticle = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ) 41 | } 42 | 43 | ResponsiveArticle.metadata = { 44 | name: 'Ashiru Olawale', // My name 45 | github: 'walebant', // Github username 46 | description: 'A responsive article loader that fits every screen 🎉', // Little tagline 47 | filename: 'ResponsiveArticle', // filename of your loader 48 | } 49 | 50 | export default ResponsiveArticle 51 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ResponsiveProduct.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ResponsiveProduct = props => ( 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 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 | ResponsiveProduct.metadata = { 72 | name: 'Ravisankar Chinnam', // My name 73 | github: 'ravisankarchinnam', // Github username 74 | description: 'Full width responsive Ecommerce Product', // Little tagline 75 | filename: 'ResponsiveProduct', // filename of your loader 76 | } 77 | 78 | export default ResponsiveProduct 79 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/RotatingGallery.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const RotatingGallery = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | } 15 | 16 | RotatingGallery.metadata = { 17 | name: 'Marius Jørgensen', 18 | github: 'marjorg', 19 | description: 'A rotaing gallery', 20 | filename: 'RotatingGallery', 21 | } 22 | 23 | export default RotatingGallery 24 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ShoppingLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import ContentLoader from "react-content-loader" 3 | 4 | const ShoppingLoader = props => { 5 | return ( 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ) 33 | } 34 | 35 | ShoppingLoader.metadata = { 36 | name: 'Nitish sharma', 37 | github: 'Nitz2611', 38 | description: 'A loading skeleton for shopping website', 39 | filename:'ShoppingLoader' 40 | } 41 | 42 | export default ShoppingLoader 43 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import ContentLoader from 'react-content-loader' 2 | import React from 'react' 3 | 4 | const SidebarLoader = () => { 5 | return ( 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 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 | A 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | ) 59 | } 60 | 61 | SidebarLoader.metadata = { 62 | name: 'Fahim Hasasn', 63 | github: 'fahim-tonmoy', 64 | description: 'A loading skeleton for your playlist.', 65 | filename: 'Sidebar', 66 | } 67 | 68 | export default SidebarLoader 69 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/SnapchatThread.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const SnapchatThread = props => { 5 | return ( 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ) 23 | } 24 | 25 | SnapchatThread.metadata = { 26 | name: 'Marius Jørgensen', 27 | github: 'marjorg', 28 | description: 'A singular Snapchat conversation', 29 | filename: 'SnapchatThread', 30 | } 31 | 32 | export default SnapchatThread 33 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Table.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const TableRow = props => { 5 | const random = Math.random() * (1 - 0.7) + 0.7 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ) 18 | } 19 | 20 | const Table = props => ( 21 | 22 | {Array(10) 23 | .fill('') 24 | .map((e, i) => ( 25 | 30 | ))} 31 | 32 | ) 33 | 34 | Table.metadata = { 35 | name: 'DaniloWoz', 36 | github: 'danilowoz', 37 | description: 'Table with the width of the dynamic rows', 38 | filename: 'Table', 39 | } 40 | 41 | export default Table 42 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/TableLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const TableLoader = props => ( 5 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 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 | TableLoader.metadata = { 68 | name: 'Sridhar Easwaran', 69 | github: 'sridhareaswaran', 70 | description: 'Loader for Tables', 71 | filename: 'TableLoader', 72 | } 73 | 74 | export default TableLoader 75 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/TaskList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const TaskList = props => { 5 | return ( 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ) 23 | } 24 | 25 | TaskList.metadata = { 26 | name: 'Abraham Calsin', 27 | github: 'abrahamcalsin', 28 | description: 'Loading a list of tasks.', 29 | filename: 'TaskList', 30 | } 31 | 32 | export default TaskList 33 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/ThreeDots.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const ThreeDots = props => ( 5 | 12 | 13 | 14 | 15 | 16 | ) 17 | 18 | ThreeDots.metadata = { 19 | name: 'RioF', 20 | github: 'clariokids', 21 | description: 'Three Dots', 22 | filename: 'ThreeDots', 23 | } 24 | 25 | export default ThreeDots 26 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Twitter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import ContentLoader from "react-content-loader" 3 | 4 | const Twitter = (props) => ( 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ) 22 | 23 | Twitter.metadata = { 24 | name: 'Sagi', // My name 25 | github: 'sagi403', // Github username 26 | description: 'Twitter generic text with image', // Little tagline 27 | filename: 'Twitter', // filename of your loader 28 | } 29 | 30 | export default Twitter 31 | 32 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/UpworkJobLoader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const UpworkJobLoader = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | } 15 | 16 | UpworkJobLoader.metadata = { 17 | name: 'Ahsan Ullah', // My name 18 | github: 'IamAhsanMani', // Github username 19 | description: 'Upwork Job', 20 | filename: 'UpworkJobLoader', 21 | } 22 | 23 | export default UpworkJobLoader 24 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/UserReviewSkype.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const UserReviewSkype = props => { 5 | return ( 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ) 31 | } 32 | 33 | UserReviewSkype.metadata = { 34 | name: 'Pushp Vashisht', 35 | github: 'pushp1997', 36 | description: 'A User Review with Skype like user image.', 37 | filename: 'UserReviewSkype', 38 | } 39 | 40 | export default UserReviewSkype 41 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/XYChart.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const XYChart = props => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ) 20 | } 21 | 22 | XYChart.metadata = { 23 | name: 'XYChart', // My name 24 | github: 'ankursehdev', // Github username 25 | description: 'XY Chart Loading', // Little tagline 26 | filename: 'XYChart', // filename of your loader 27 | } 28 | 29 | export default XYChart 30 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/Youtube.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const Youtube = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | ) 34 | 35 | Youtube.metadata = { 36 | name: 'Akash Bambhaniya', 37 | github: 'Akashnb', // Github username 38 | description: 'Youtube', 39 | filename: 'Youtube', // filename of your loader 40 | } 41 | 42 | export default Youtube 43 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/YoutubeFresh.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const YoutubeFresh = props => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | ) 12 | 13 | YoutubeFresh.metadata = { 14 | name: 'Costal Oktopus', 15 | github: 'coktopus', // Github username 16 | description: 'Youtube fresh', 17 | filename: 'YoutubeFresh', // filename of your loader 18 | } 19 | 20 | export default YoutubeFresh 21 | -------------------------------------------------------------------------------- /src/Gallery/insertYourLoaderHere/YoutubeMagic.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | const YoutubeMagic = ({ 5 | heading = { width: 140, height: 24 }, 6 | row = 2, 7 | column = 5, 8 | width = 1366, 9 | padding = 12, 10 | borderRadius = 4, 11 | ...props 12 | }) => { 13 | const list = [] 14 | 15 | let height 16 | 17 | for (let i = 1; i <= row; i++) { 18 | const itemWidth = (width - padding * (column + 1)) / column 19 | 20 | const height1 = (itemWidth * 9) / 16 21 | 22 | const height2 = 20 23 | 24 | const height3 = 20 25 | 26 | const headingWidth = heading.width 27 | 28 | const headingHeight = heading.height 29 | 30 | const space = 31 | padding + 32 | headingHeight + 33 | (padding + height1) + 34 | (padding / 2 + height2) + 35 | height3 + 36 | padding * 6 37 | 38 | const yHeading = padding + space * (i - 1) 39 | 40 | list.push( 41 | 49 | ) 50 | 51 | for (let j = 0; j < column; j++) { 52 | const x = padding + j * (itemWidth + padding) 53 | 54 | const y1 = yHeading + headingHeight + (padding * 3) / 2 55 | 56 | const y2 = y1 + padding + height1 57 | 58 | const y3 = y2 + padding / 2 + height2 59 | 60 | list.push( 61 | <> 62 | 70 | 71 | 79 | 80 | ) 81 | 82 | if (i === row) { 83 | height = y3 + height3 84 | } 85 | } 86 | } 87 | 88 | return ( 89 | 95 | {list} 96 | 97 | ) 98 | } 99 | 100 | YoutubeMagic.metadata = { 101 | name: 'I am Doong - I come from Việt Nam', 102 | github: 'toiladoong', 103 | description: 'YoutubeMagic', 104 | filename: 'YoutubeMagic', 105 | } 106 | 107 | export default YoutubeMagic 108 | -------------------------------------------------------------------------------- /src/Gallery/style.css: -------------------------------------------------------------------------------- 1 | .showcase-filter { 2 | padding: 6em 0 1em 0; 3 | margin: 0 3em; 4 | max-width: 120em; 5 | display: flex; 6 | justify-content: space-between; 7 | border-bottom: 1px solid #eee; 8 | } 9 | 10 | .showcase-filter__results { 11 | font-size: var(--font-size__base); 12 | color: var(--color-grey-light); 13 | } 14 | 15 | .showcase-filter__results a { 16 | font: inherit; 17 | font-size: var(--font-size__medium); 18 | color: inherit; 19 | text-decoration: none; 20 | } 21 | 22 | .showcase-filter input { 23 | background: none; 24 | border: 1px solid #ddd; 25 | padding: 1em; 26 | font: inherit; 27 | font-size: 0.8em; 28 | border-radius: 4px; 29 | height: 1em; 30 | width: 20em; 31 | } 32 | 33 | .showcase { 34 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, #fff 5%); 35 | } 36 | 37 | .showcase-grid { 38 | padding: 0 2em; 39 | margin: 2em auto; 40 | max-width: 120em; 41 | 42 | display: flex; 43 | flex-wrap: wrap; 44 | } 45 | 46 | .showcase-item { 47 | min-height: 300px; 48 | box-sizing: border-box; 49 | margin: 15px; 50 | padding: 30px; 51 | width: calc((100% / 3) - 30px); 52 | background-color: #ffffff; 53 | border: 1px solid #e6e7eb; 54 | border-radius: 4px; 55 | box-shadow: 0 0.7px 0.9px rgba(0, 0, 0, 0.024), 56 | 0 1.9px 2.4px rgba(0, 0, 0, 0.035), 0 4.5px 5.7px rgba(0, 0, 0, 0.046), 57 | 0 15px 19px rgba(0, 0, 0, 0.07); 58 | } 59 | 60 | .showcase-component { 61 | height: 15vw; 62 | overflow: hidden; 63 | } 64 | 65 | .showcase-component svg { 66 | width: 100%; 67 | height: 100%; 68 | } 69 | 70 | .showcase-caption { 71 | box-sizing: border-box; 72 | padding-top: 16px; 73 | margin-top: 16px; 74 | margin-bottom: -8px; 75 | } 76 | 77 | .showcase-item h4 { 78 | margin: 0; 79 | margin-right: 0.7em; 80 | display: inline-block; 81 | width: 70%; 82 | font-weight: normal; 83 | font-size: var(--font-size__base); 84 | letter-spacing: 0.3px; 85 | } 86 | 87 | .showcase-item a { 88 | text-decoration: none; 89 | display: block; 90 | color: var(--color-grey-light); 91 | font-size: var(--font-size__base); 92 | letter-spacing: 0.5px; 93 | margin-top: 1em; 94 | } 95 | 96 | .showcase-item .source { 97 | float: right; 98 | margin-top: 0; 99 | color: var(--color-brand); 100 | } 101 | 102 | .showcase-item__new { 103 | display: flex; 104 | position: relative; 105 | } 106 | 107 | .showcase-item__new a { 108 | margin: auto; 109 | text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 110 | box-shadow: 0 4px 3px rgba(0, 0, 0, 0.04); 111 | position: relative; 112 | background: #eeeeee80; 113 | padding: 0.5em 1em; 114 | border-radius: 40px; 115 | transition: all 0.3s ease; 116 | top: -2em; 117 | z-index: 999; 118 | } 119 | 120 | .showcase-item__new a:before { 121 | content: '+'; 122 | display: inline-block; 123 | margin-right: 0.5em; 124 | } 125 | 126 | .showcase-item__new-loader { 127 | position: absolute; 128 | left: 16px; 129 | right: 16px; 130 | bottom: 16px; 131 | width: calc(100% - 32px); 132 | height: calc(100% - 32px); 133 | } 134 | -------------------------------------------------------------------------------- /src/assets/background-asset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danilowoz/create-content-loader/9808509d1163aa459007ea5ca18b032335a34d72/src/assets/background-asset.png -------------------------------------------------------------------------------- /src/assets/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | circle 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/clone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | background 5 | 6 | 7 | 8 | Layer 1 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danilowoz/create-content-loader/9808509d1163aa459007ea5ca18b032335a34d72/src/assets/favicon.png -------------------------------------------------------------------------------- /src/assets/grid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/help.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/assets/rect.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | rect 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/assets/select.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | select 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/assets/trash.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 11 | trash 12 | Created with Sketch. 13 | 14 | 15 | 16 | 18 | 20 | 22 | 24 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/components/Config.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import trashIcon from '../assets/trash.svg' 4 | 5 | const Config = ({ 6 | handleCheckbox, 7 | handleImageAsBackground, 8 | handleInput, 9 | handleColor, 10 | height, 11 | imageAsBackground, 12 | backgroundColor, 13 | resetColors, 14 | rtl, 15 | gridVisibility, 16 | foregroundColor, 17 | speed, 18 | width, 19 | }) => ( 20 |
21 |
22 |

Canvas size

23 | 24 |

25 | 33 | 34 |

35 | 36 |

37 | 45 | 46 |

47 |
48 | 49 |
50 |

51 | Colors{' '} 52 | 55 |

56 | 57 |

58 | 65 | 66 |

67 | 68 |

69 | 76 | 77 |

78 |
79 | 80 |
81 |

Configurations

82 |

83 | 90 | 91 |

92 | 93 |

Right-to-left

94 | 95 | 106 |
107 | 108 |
109 |

Select a image to set as background

110 | 111 |

112 | 118 | 119 | {imageAsBackground && ( 120 | 126 | )} 127 |

128 |
129 | 130 |

131 |

Grid visibility

132 | 133 | 144 |

145 |
146 | ) 147 | 148 | export default Config 149 | -------------------------------------------------------------------------------- /src/components/Highlighter.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' 3 | import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism' 4 | 5 | const Highlighter = ({ code }) => { 6 | return ( 7 | 8 | {code} 9 | 10 | ) 11 | } 12 | 13 | export default Highlighter 14 | -------------------------------------------------------------------------------- /src/components/Layout/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactGA from 'react-ga' 3 | 4 | import '../style/Header.css' 5 | import Helmet from 'react-helmet' 6 | 7 | import pkg from '../../../package.json' 8 | 9 | const Header = () => { 10 | return ( 11 | <> 12 | 13 | 17 | 18 | 19 |
20 |
21 |

22 | Create React Content Loader 23 | {pkg.dependencies['react-content-loader']} 24 |

25 |

26 | Tool to easily create your animated skeleton-screen components, 27 | replacing usual loading and delivering better experiences for users, 28 | giving a wireframe of your pages like placeholders boxes for content 29 | and images. Supports React, React Native, Vue, and vanilla HTML. 30 |

31 |
32 | 33 | 61 |
62 | 63 | ) 64 | } 65 | 66 | export default Header 67 | -------------------------------------------------------------------------------- /src/components/LearnMore.tsx: -------------------------------------------------------------------------------- 1 | const links = [ 2 | { 3 | title: 'Documentation', 4 | link: 'https://github.com/danilowoz/react-content-loader', 5 | }, 6 | { 7 | title: 'Examples', 8 | link: 'https://danilowoz.github.io/react-content-loader/', 9 | }, 10 | ] 11 | 12 | const content = [ 13 | { 14 | title: 'How to create and customize react-content-loader (by Sara Fotros)', 15 | link: 16 | 'https://medium.com/better-programming/create-and-customize-react-content-loader-c630a3b917ac', 17 | }, 18 | { 19 | title: 20 | 'Implementing loading placeholder with react-content-loader (by Kohei Asai)', 21 | link: 22 | 'https://www.kohei.dev/posts/react-content-loader?postId=react-content-loader&hl=en-US', 23 | }, 24 | ] 25 | 26 | const LearnMore = () => { 27 | return ( 28 |
29 |

Links:

30 | 31 | {links.map(({ link, title }) => { 32 | return ( 33 |

34 | 35 | {title} 36 | 37 |

38 | ) 39 | })} 40 | 41 |

How to use it:

42 | 43 | {content.map(({ link, title }) => { 44 | return ( 45 |

46 | 47 | {title} 48 | 49 |

50 | ) 51 | })} 52 |
53 | ) 54 | } 55 | 56 | export default LearnMore 57 | -------------------------------------------------------------------------------- /src/components/Loading.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ContentLoader from 'react-content-loader' 3 | 4 | // Inception... 5 | const Loading = props => ( 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ) 25 | 26 | export default Loading 27 | -------------------------------------------------------------------------------- /src/components/SEO.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Helmet from 'react-helmet' 3 | 4 | const SEO = () => { 5 | const currentTitle = 'React Skeleton - Create Content Loader' 6 | const metaDescription = 7 | 'Tool to easily create your animated skeleton components, replacing usual loading, giving a wireframe of your pages like placeholders for content and images.' 8 | const siteUrl = 'http://skeletonreact.com/' 9 | const author = '@danilowoz' 10 | const keywords = [ 11 | 'react', 12 | 'react-native', 13 | 'vue', 14 | 'skeleton', 15 | 'svg', 16 | 'placeholder', 17 | 'wireframe', 18 | 'loader', 19 | 'loading', 20 | 'content', 21 | ] 22 | 23 | return ( 24 | 0 84 | ? { 85 | name: `keywords`, 86 | content: keywords.join(`, `), 87 | } 88 | : [] 89 | )} 90 | /> 91 | ) 92 | } 93 | 94 | export default SEO 95 | -------------------------------------------------------------------------------- /src/components/Upload/Upload.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect, useState, useCallback } from 'react' 2 | import ReactGA from 'react-ga' 3 | 4 | import './style.css' 5 | import { parseSvg } from './service' 6 | import Loading from '../Loading' 7 | 8 | const ERROR_TIMEOUT = 4000 9 | 10 | const Upload = ({ handleSvg }) => { 11 | const refContainer = useRef() 12 | const [hover, setHover] = useState(false) 13 | const [error, setError] = useState() 14 | const [loading, setLoading] = useState() 15 | 16 | const submit = useCallback( 17 | async file => { 18 | setLoading(true) 19 | 20 | const { ok, message } = await parseSvg(file) 21 | if (ok) { 22 | handleSvg(message) 23 | } else { 24 | setError(message) 25 | 26 | setTimeout(() => { 27 | setError() 28 | }, ERROR_TIMEOUT) 29 | } 30 | 31 | setTimeout(() => { 32 | setLoading(false) 33 | }, 300) 34 | 35 | ReactGA.event({ 36 | category: 'Parse SVG', 37 | action: 'Upload', 38 | }) 39 | }, 40 | [handleSvg, setLoading] 41 | ) 42 | 43 | const handleDragIn = e => { 44 | e.preventDefault() 45 | e.stopPropagation() 46 | 47 | setHover(true) 48 | } 49 | const handleDragOut = e => { 50 | e.preventDefault() 51 | e.stopPropagation() 52 | 53 | setHover(false) 54 | } 55 | 56 | const handleDrop = useCallback( 57 | e => { 58 | e.preventDefault() 59 | e.stopPropagation() 60 | 61 | if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { 62 | const file = e.dataTransfer.files[0] 63 | 64 | setHover(false) 65 | 66 | if (file.type !== 'image/svg+xml') { 67 | setError('Only SVG files are allowed.') 68 | 69 | setTimeout(() => { 70 | setError() 71 | }, ERROR_TIMEOUT) 72 | 73 | return 74 | } 75 | 76 | submit(e.dataTransfer.files[0]) 77 | } 78 | }, 79 | [submit] 80 | ) 81 | 82 | useEffect(() => { 83 | const div = refContainer.current 84 | 85 | div.addEventListener('dragenter', handleDragIn) 86 | div.addEventListener('dragleave', handleDragOut) 87 | div.addEventListener('drop', handleDrop) 88 | 89 | return () => { 90 | div.removeEventListener('dragenter', handleDragIn) 91 | div.removeEventListener('dragleave', handleDragOut) 92 | div.removeEventListener('drop', handleDrop) 93 | } 94 | }, [handleDrop]) 95 | 96 | return ( 97 |
98 | {loading ? ( 99 | 100 | ) : ( 101 | <> 102 |
107 |
108 |

109 | Select or drop here a SVG file 110 |
to be converted in a loading. 111 |

112 | 113 | {error &&

{error}

} 114 |
115 | submit(file.target.files[0])} 118 | multiple={false} 119 | /> 120 |
121 | 122 |

123 | Make sure to remove all images and fonts from SVG file. 124 |

125 | 126 | )} 127 |
128 | ) 129 | } 130 | 131 | export default Upload 132 | -------------------------------------------------------------------------------- /src/components/Upload/UploadSnippet.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import ReactGA from 'react-ga' 3 | 4 | import './style.css' 5 | import { parseSvg } from './service' 6 | import Loading from '../Loading' 7 | 8 | const ERROR_TIMEOUT = 4000 9 | 10 | const UploadSnippet = ({ handleSvg }) => { 11 | const [value, setValue] = useState('') 12 | const [error, setError] = useState() 13 | const [loading, setLoading] = useState() 14 | 15 | const submit = async () => { 16 | setLoading(true) 17 | 18 | const { ok, message } = await parseSvg(value) 19 | if (ok) { 20 | handleSvg(message) 21 | } else { 22 | setError(message) 23 | 24 | setTimeout(() => { 25 | setError() 26 | }, ERROR_TIMEOUT) 27 | } 28 | 29 | setTimeout(() => { 30 | setLoading(false) 31 | }, 300) 32 | 33 | ReactGA.event({ 34 | category: 'Parse SVG', 35 | action: 'Snippet', 36 | }) 37 | } 38 | 39 | return ( 40 |
41 | {loading ? ( 42 | 43 | ) : ( 44 | <> 45 |

46 | Paste bellow a SVG snippet code or only the shape elements. 47 | 50 |

51 | 52 | {error &&

{error}

} 53 | 54 |