{"id":16918598,"url":"https://github.com/xnimorz/rprogress","last_synced_at":"2025-04-11T11:31:11.289Z","repository":{"id":66223816,"uuid":"51707401","full_name":"xnimorz/rprogress","owner":"xnimorz","description":"React ajax loader progress bar with clear API ","archived":false,"fork":false,"pushed_at":"2018-09-11T14:43:38.000Z","size":2043,"stargazers_count":11,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T13:11:21.430Z","etag":null,"topics":["ajax-progress","loader","progress-bar","react","react-progress-bar"],"latest_commit_sha":null,"homepage":"http://xnimorz.github.io/rprogress/","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/xnimorz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-14T18:31:21.000Z","updated_at":"2024-06-09T05:13:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"498df93c-1c28-4788-be99-3174dc09debc","html_url":"https://github.com/xnimorz/rprogress","commit_stats":{"total_commits":29,"total_committers":2,"mean_commits":14.5,"dds":"0.13793103448275867","last_synced_commit":"e570cd4893aabfb71fd69d17b4473d57f508b3be"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Frprogress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Frprogress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Frprogress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnimorz%2Frprogress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xnimorz","download_url":"https://codeload.github.com/xnimorz/rprogress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248383915,"owners_count":21094631,"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":["ajax-progress","loader","progress-bar","react","react-progress-bar"],"created_at":"2024-10-13T19:40:45.193Z","updated_at":"2025-04-11T11:31:10.880Z","avatar_url":"https://github.com/xnimorz.png","language":"JavaScript","readme":"# RProgress.js\n\nRProgress is react ajax loader progress bar with clear API.\n\nIt's helpful to create Ajax-heavy apps.\nLibrary use API to manage progress bar.\n\n\nExample: http://xnimorz.github.io/rprogress/\n\n### Install:\n\n```\nnpm install --save rprogress\n```\nor\n```\nyarn add rprogress\n```\n\n### Usage\n\nThere are several ways to use rprogress.js :\n\n##### №1) use webpack bundle\n\n```\nimport { RProgress, RProgressApi } from 'rprogress';\n```\n\nor\n\n```\nimport { RProgress, RProgressApi } from 'rprogress/lib/index';\n```\n\nThen you need to add css-loader to your webpack config file.\n\nFor example:\n```\n {\n     test: /\\.css$/,\n     loader: ExtractTextPlugin.extract(\n         'style',\n         'css?modules\u0026importLoaders=1\u0026localIdentName=[name]__[local]___[hash:base64:5]'\n     )\n }\n```\n\nRProgress support css-modules, but you can compile css without them:\n```\n {\n     test: /\\.css$/,\n     loader: ExtractTextPlugin.extract(\n         'style',\n         'css?importLoaders=1\u0026localIdentName=[name]__[local]___[hash:base64:5]'\n     )\n }\n```\n\nIn this case rprogress will use \"rpgogress\", \"rprogress-overlay\" css classes.\n\n\n##### №2) use source code\n\n```\nimport { RProgress, RProgressAPI } from 'rprogress/src';\n```\n\nThen you need to add babel-loader for javascript code and css-loader with css-modules for styles to your webpack config file.\n\nSuch as:\n\n```\nmodule: {\n        loaders: [\n            { test: /\\.jsx?$/, loader: \"babel-loader\"},\n            {\n                test: /\\.css$/,\n                loader: ExtractTextPlugin.extract(\n                    'style',\n                    'css?modules\u0026importLoaders=1\u0026localIdentName=[name]__[local]___[hash:base64:5]',\n                    'postcss-loader'\n                )\n            }\n        ]\n    }\n```\n\nAlso you can open [webpack.config.js](https://github.com/xnimorz/rprogress/blob/master/webpack.example.css-modules.config.js) or [webpack.example.js (without css-modules)](https://github.com/xnimorz/rprogress/blob/master/webpack.example.js) to check webpack configs.\n\n### API\n\n```\nRProgressApi.start() - show progress. Progress position will be from 0 to 12%\n\nRProgressApi.step() - increase progress position by 10%\n\nRProgressApi.step(to) - set up progress position to to%\n\nRProgressApi.complete() - set up progress position to 100% and close progress when animation is over\n\nRProgressApi.release() - set up progress position to 0\n\nRProgressApi.subscribe(callback) - call callback-function after any progress position changes\n\nRProgressApi.toggleAnimation(animationEnableFlag) - turn off\\on auto-progress\n```\n\n### Auto-progress\n\nProgress bar indicate working and after every 500ms animate himself. In this case progress bar position increase up to 2%\nYou can turn off auto-progress call ```RProgressApi.toggleAnimation(false)```\n\n### Customization\n\n##### Color:\n\n```\nReact.render(\u003cRProgress color='#21B919' /\u003e);\n```\n\n##### Type:\n\nRProgress supports two types:\n\n- `incremental` (default) progress bar\n- `cycle`\n\nTurn on cycle type:\n```\nReact.render(\u003cRProgress type='cycle' /\u003e);\n```\n\n##### Custom class:\n\n```\nimport { RProgress } from 'rprogress';\n\nimport 'myStylesClass.css';\n\nReact.render(\u003cRProgress className='myStylesClass' /\u003e);\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxnimorz%2Frprogress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxnimorz%2Frprogress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxnimorz%2Frprogress/lists"}