{"id":26783211,"url":"https://github.com/vamosgs/react-preloaders","last_synced_at":"2025-04-19T15:19:59.133Z","repository":{"id":25701925,"uuid":"105085897","full_name":"VamOSGS/react-preloaders","owner":"VamOSGS","description":"🌌Package for adding preloaders to your React apps","archived":false,"fork":false,"pushed_at":"2023-01-04T00:51:55.000Z","size":3753,"stargazers_count":76,"open_issues_count":68,"forks_count":24,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T12:52:11.657Z","etag":null,"topics":["css-animations","preloaders","react-preloaders","reactjs"],"latest_commit_sha":null,"homepage":"https://vamosgs.github.io/react-preloaders/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VamOSGS.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":"vamosgs","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-09-28T01:07:51.000Z","updated_at":"2024-04-03T14:45:58.000Z","dependencies_parsed_at":"2023-01-14T07:00:54.437Z","dependency_job_id":null,"html_url":"https://github.com/VamOSGS/react-preloaders","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VamOSGS%2Freact-preloaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VamOSGS%2Freact-preloaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VamOSGS%2Freact-preloaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VamOSGS%2Freact-preloaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VamOSGS","download_url":"https://codeload.github.com/VamOSGS/react-preloaders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249725086,"owners_count":21316123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-animations","preloaders","react-preloaders","reactjs"],"created_at":"2025-03-29T09:18:33.059Z","updated_at":"2025-04-19T15:19:59.092Z","avatar_url":"https://github.com/VamOSGS.png","language":"JavaScript","funding_links":["https://patreon.com/vamosgs"],"categories":[],"sub_categories":[],"readme":"## React Preloaders\n\n![React Preloaders](https://raw.githubusercontent.com/VamOSGS/react-preloaders/development/assets/react-preloaders-card.jpg)\n\n![npm](https://img.shields.io/npm/v/react-preloaders.svg?style=flat-square)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-preloaders.svg?style=flat-square)\n![Travis (.org) branch](https://img.shields.io/travis/vamosgs/react-preloaders/development.svg?style=flat-square)\n[![npm downloads](https://img.shields.io/npm/dm/react-preloaders.svg?style=flat-square)](https://www.npmjs.org/package/react-preloaders)\n![NPM](https://img.shields.io/npm/l/react-preloaders.svg?style=flat-square)\n#### [vamosgs.github.io/react-preloaders](https://vamosgs.github.io/react-preloaders/)\n\n### Setup\n\nInstall it:\n\n```bash\nnpm install react-preloaders --save\n```\n\nor\n\n```bash\nyarn add react-preloaders --save\n```\n\n### Get Started\n\n#### find full preloaders list [here](https://vamosgs.github.io/react-preloaders/).\n\n### Simplest way\n\n```jsx\nimport React from 'react';\nimport { Lines } from 'react-preloaders';\n\nfunction App() {\n  return (\n    \u003cReact.Fragment\u003e\n      \u003cYourApp /\u003e\n      \u003cLines /\u003e\n    \u003c/React.Fragment\u003e\n  );\n}\n```\n### Your components as preloader\nHere is example how you can use your components as prelaoder:\n\n```jsx\nimport React from 'react';\nimport { CustomPreloader } from 'react-preloaders';\n\nfunction App() {\n  return (\n    \u003cReact.Fragment\u003e\n      \u003cYourApp /\u003e\n         \u003cCustomPreloader\u003e\n                 YOUR CUSTOM PRELOADER COMPONENT\n         \u003c/CustomPreloader\u003e\n    \u003c/React.Fragment\u003e\n  );\n}\n```\n\n### Properties (Props)\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eProp\u003c/th\u003e\n    \u003cth\u003etype\u003c/th\u003e\n    \u003cth\u003eDefault value\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003ca href=\"#color-string\"\u003ecolor\u003c/a\u003e\u003c/th\u003e\n    \u003ctd\u003eString(hex, rgb,...)\u003c/td\u003e\n    \u003ctd\u003e#2D2D2D\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003ca href=\"#background-string\"\u003ebackground\u003c/a\u003e\u003c/th\u003e\n    \u003ctd\u003eString(blur, gradient...)\u003c/td\u003e\n    \u003ctd\u003e#F7F7F7\u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003cth\u003e\u003ca href=\"#time-number\"\u003etime\u003c/a\u003e\u003c/th\u003e\n    \u003ctd\u003eNumber(Milliseconds)\u003c/td\u003e\n    \u003ctd\u003e1300ms\u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003cth\u003e\u003ca href=\"#animation-string\"\u003eanimation\u003c/a\u003e\u003c/th\u003e\n    \u003ctd\u003eString(fade, slide...)\u003c/td\u003e\n    \u003ctd\u003efade\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003ca href=\"#customloading-boolean\"\u003ecustomLoading\u003c/a\u003e\u003c/th\u003e\n    \u003ctd\u003eBoolean\u003c/td\u003e\n    \u003ctd\u003eundefined\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## color (String)\n\nColor (hex, rgb, rgba) defines preloaders main color.\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n\u003cLines color={'#f7f7f7'} /\u003e;\n\u003cLines color={'rgb(158, 38, 102)'} /\u003e;\n```\n\n## background (String)\n\nBackground can be just color (hex, rgb), gradient or blured.\nFor just colored background pass color(hex, rgb, rgba).\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n\u003cLines background=\"#f7f7f7\" /\u003e;\n```\n\nFor gradient background pass your gradient.\n\nYou can generate gradients [here](https://cssgradient.io/).\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n\u003cLines background=\"linear-gradient(180deg, #f95759 0%, #a62022 100%)\" /\u003e;\n```\n\nFor blured background just pass blur.(it's now in beta)\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n\u003cLines background=\"blur\" /\u003e;\n```\n\n## time (Number)\n\nTime defines how long you want show preloader after page loaded.\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n\u003cLines time={1800} /\u003e;\n```\n\n### If your are using [customLoading](#customLoading) and you don't want play preloader if your loading status false you need to pass time 0\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n\u003cLines customLoading={loading} time={0} /\u003e;\n```\n\n## animation (String)\n\nNow you can choose preloader closing animation, in this version available just 2 animations \u003cb\u003efade\u003c/b\u003e and \u003cb\u003eslide\u003c/b\u003e.\nBy default preloader will close with \u003cb\u003efade\u003c/b\u003e animation.\n\n#### For \u003cb\u003eslide\u003c/b\u003e animation you can choose direction.\n\n```jsx\nimport { Lines } from 'react-preloaders';\n\n\u003cLines animation=\"slide\" /\u003e;\n\u003cLines animation=\"slide-down\" /\u003e;\n\u003cLines animation=\"slide-right\" /\u003e;\n\u003cLines animation=\"slide-left\" /\u003e;\n```\n\n## customLoading (Boolean)\n\nIf in your app somthing loads async you can use preloaders too. For \u003cb\u003ecustomLoading\u003c/b\u003e you need to pass your loading status.\n\n```jsx\nimport React, { Component } from 'react';\nimport { Lines } from 'react-preloaders';\n\nclass App {\n  constructor() {\n    state = {\n      loading: true\n    };\n  }\n  componentDidMount() {\n    fetch('https://jsonplaceholder.typicode.com/todos/1')\n      .then(response =\u003e response.json())\n      .then(json =\u003e {\n        setState({ loading: false });\n      })\n      .catch(err =\u003e {\n        setState({ loading: false });\n      });\n  }\n  render() {\n    return (\n      \u003cReact.Fragment\u003e\n        \u003cYourApp /\u003e\n        \u003cLines customLoading={loading} /\u003e\n      \u003c/React.Fragment\u003e\n    );\n  }\n}\n```\n\n### Example with hooks\n\n```jsx\nimport React, { useState, useEffect } from 'react';\nimport { Lines } from 'react-preloaders';\n\nfunction App() {\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() =\u003e {\n    fetch('https://jsonplaceholder.typicode.com/todos/1')\n      .then(response =\u003e response.json())\n      .then(json =\u003e {\n        setLoading(false);\n      })\n      .catch(err =\u003e {\n        setLoading(false);\n      });\n  }, []);\n\n  return (\n    \u003cReact.Fragment\u003e\n      \u003cYourApp /\u003e\n      \u003cLines customLoading={loading} /\u003e\n    \u003c/React.Fragment\u003e\n  );\n}\n```\n\n#### CSS loading (under v3.x.x) methods for old versions\n\nPackages you need\n\n```bash\nstyle-loader css-loader\n```\n\nmore if you want to extract css you need\n\n#### Extract ( webpack 3.x )\n\n```bash\nextract-text-webpack-plugin\n```\n\n#### Extract ( webpack 4.x )\n\n```bash\nmini-css-extract-plugin\n```\n\n#### Add this to your webpack if you don't have css loader yet\n\n```js\n{\n  test: /\\.css$/,\n  use: [ 'style-loader', 'css-loader' ]\n}\n```\n\n#### Extract ( webpack 3.x )\n\n```js\nconst ExtractTextPlugin = require('extract-text-webpack-plugin');\nconst extractCSS = new ExtractTextPlugin('style.[hash].css');\n\nmodule.exports = {\n  plugins: [extractCSS],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: extractCSS.extract(['css-loader', 'postcss-loader'])\n      }\n    ]\n  }\n};\n```\n\n#### Extract ( webpack 4.x )\n\n```js\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nmodule.exports = {\n  plugins: [\n    new MiniCssExtractPlugin({\n      // Options similar to the same options in webpackOptions.output\n      // both options are optional\n      filename: '[name].css',\n      chunkFilename: '[id].css'\n    })\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: MiniCssExtractPlugin.loader,\n            options: {\n              // you can specify a publicPath here\n              // by default it use publicPath in webpackOptions.output\n              publicPath: '../'\n            }\n          },\n          'css-loader'\n        ]\n      }\n    ]\n  }\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvamosgs%2Freact-preloaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvamosgs%2Freact-preloaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvamosgs%2Freact-preloaders/lists"}