{"id":17063135,"url":"https://github.com/glsdown/dash-loading-spinners","last_synced_at":"2025-04-12T18:15:02.857Z","repository":{"id":44696776,"uuid":"378518186","full_name":"glsdown/dash-loading-spinners","owner":"glsdown","description":"Fun and funky spinners for use with Dash apps","archived":false,"fork":false,"pushed_at":"2023-12-18T19:25:52.000Z","size":1025,"stargazers_count":36,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T18:14:32.831Z","etag":null,"topics":["dash","dash-loading","dash-loading-spinner","dash-loading-spinners","dash-spinner","dash-spinners","loading-spinners","plotly-dash","spinners"],"latest_commit_sha":null,"homepage":"https://dash-loading-spinners.sproodlebuzz.co.uk/","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/glsdown.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","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":"2021-06-19T22:53:10.000Z","updated_at":"2025-04-12T15:18:38.000Z","dependencies_parsed_at":"2024-10-20T17:33:51.715Z","dependency_job_id":null,"html_url":"https://github.com/glsdown/dash-loading-spinners","commit_stats":{"total_commits":73,"total_committers":4,"mean_commits":18.25,"dds":"0.20547945205479456","last_synced_commit":"56f9376c682dbfade6de3d4d5eeb3025a1023b84"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glsdown%2Fdash-loading-spinners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glsdown%2Fdash-loading-spinners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glsdown%2Fdash-loading-spinners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glsdown%2Fdash-loading-spinners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glsdown","download_url":"https://codeload.github.com/glsdown/dash-loading-spinners/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248610351,"owners_count":21132924,"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":["dash","dash-loading","dash-loading-spinner","dash-loading-spinners","dash-spinner","dash-spinners","loading-spinners","plotly-dash","spinners"],"created_at":"2024-10-14T10:51:33.622Z","updated_at":"2025-04-12T18:15:02.814Z","avatar_url":"https://github.com/glsdown.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dash Loading Spinners\n\n[![Tests](https://github.com/glsdown/dash-loading-spinners/actions/workflows/test.yml/badge.svg)](https://github.com/glsdown/dash-loading-spinners/actions/workflows/test.yml)\n![PyPI](https://img.shields.io/pypi/v/dash-loading-spinners)\n![PyPI - License](https://img.shields.io/pypi/l/dash-loading-spinners)\n![PyPI - Python Version](https://img.shields.io/pypi/pyversions/dash-loading-spinners)\n[![Downloads](https://static.pepy.tech/personalized-badge/dash-loading-spinners?period=total\u0026units=international_system\u0026left_color=grey\u0026right_color=orange\u0026left_text=Downloads)](https://pepy.tech/project/dash-loading-spinners)\n\nThis library is designed for use with [Plotly Dash](https://plotly.com). The components have all been\ndesigned to provide functionality similar to Dash's core \n[`Loading` component](https://dash.plotly.com/dash-core-components/loading),\nand will display a loading spinner whilst the underlying children are re-rendering.\n\nThe spinners in it have been adapted for use from a number of other existing\nlibraries:\n\n- [react-spinners](https://github.com/davidhu2000/react-spinners)\n- [react-loader-spinner](https://github.com/mhnpd/react-loader-spinner)\n- [react-css-spinners](https://github.com/alex996/react-css-spinners)\n\nThe majority of spinner names have been retained from the originals, but some have \nbeen amended where there were name clashes.\n\nMore details on the components and usage can be found in our [documentation](https://dash-loading-spinners.sproodlebuzz.co.uk/).\n\n---\n## Installation\n\nDash Loading Spinners is available through \n[PyPI](https://pypi.org/project/dash-loading-spinners/), and can be installed with pip:\n\n```bash\npip install dash-loading-spinners\n```\n\n---\n## Basic Usage\n\nOnce installed, you can make use of the components (in their most basic sense) as follows:\n\n```python\nimport dash\nimport dash_loading_spinners as dls\n\napp = dash.Dash()\n\napp.layout = dls.Hash()\n\nif __name__ == \"__main__\":\n    app.run_server()\n```\n\nThere are a number of attributes which are common across all spinners. These are:\n\n- **`id`** (*string*; optional):\n    The ID of this component, used to identify dash components in\n    callbacks. The ID needs to be unique across all of the components\n    in an app. \n- **`children`** (*a list of or a singular dash component, string or number*; optional):\n    The children of this component.\n- **`show_initially`** (*boolean*; default `True`):\n    Whether the Spinner should show on app start-up before the loading\n    state has been determined. Default True.\n- **`debounce`** (*number*; default `0`):\n    When using the spinner as a loading spinner, add a time delay (in\n    ms) to the spinner being removed to prevent flickering.\n- **`fullscreen`** (*boolean*; optional):\n    Boolean that determines if the loading spinner will be displayed\n    full-screen or not.\n- **`fullscreenClassName`** (*string*; optional):\n    CSS class names to apply to the container when in fullscreen.\n- **`fullscreen_style`** (*dict*; optional):\n    Defines CSS styles for the container when in fullscreen.\n\nMany spinners additional have properties that can be customised, including colour and size. You \ncan find these on the individual [component](https://dash-loading-spinners.sproodlebuzz.co.uk/examples) pages. \n\nRealistically, as part of an application, you will be using them alongside other components and \ncallbacks. Here is an example of what this might look like:\n\n_Note: \n[`dash-bootstrap-components`](https://github.com/facultyai/dash-bootstrap-components) \nisn't necessary for `dash-loading-spinners` to work, but has been included\nto improve the layout._\n\n```python\n# app.py\nimport dash\nimport dash_bootstrap_components as dbc\nimport dash_loading_spinners as dls\nfrom dash import dcc, html, Input, Output\n\nfrom helpers import get_new_graph\n\napp = dash.Dash(external_stylesheets=[dbc.themes.UNITED])\n\napp.layout = html.Div(\n    [\n        dbc.Row(\n            [\n                dbc.Col(\n                    html.Div(\n                        dbc.Button(\n                            \"Simulate slow loading component\",\n                            id=\"loading-button\",\n                            className=\"btn-success\",\n                            n_clicks=0,\n                        )\n                    ),\n                    md=3,\n                ),\n                dbc.Col(\n                    dls.Hash(\n                        dcc.Graph(id=\"loading-output\",),\n                        color=\"#435278\",\n                        speed_multiplier=2,\n                        size=100,\n                    ),\n                    md=9,\n                ),\n            ],\n        ),\n    ]\n)\n\n\n@app.callback(\n    Output(\"loading-output\", \"figure\"), [Input(\"loading-button\", \"n_clicks\")],\n)\ndef load_output(n):\n    # See note below\n    return get_new_graph(n)\n\nif __name__ == \"__main__\":\n    app.run_server()\n\n```\n\nThe function `get_new_graph` in this example is deliberately ambiguous, as it simply acts as a placeholder for any slow-loading component. For completeness, if you wish to use a similar example to the one shown above, you can use the following function:\n\n```python\n# helpers.py\nimport numpy as np\nimport plotly.graph_objects as go\nimport time\n\ndef get_new_graph(n):\n    if n:\n        # Simulate slow-loading component\n        time.sleep(2)\n    # Generate a random scatter plot\n    n = (n + 1) * 10\n    return go.Figure(\n        data=go.Scatter(\n            y=np.random.randn(n) * 100,\n            mode=\"markers\",\n            marker=dict(\n                size=16,\n                color=np.random.randn(n) * 100,\n                colorscale=\"blues\",\n                showscale=True,\n            ),\n        ),\n        layout=go.Layout(title=\"This graph takes ages to re-load\"),\n    )\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglsdown%2Fdash-loading-spinners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglsdown%2Fdash-loading-spinners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglsdown%2Fdash-loading-spinners/lists"}