dash-spinner

Dash Spinner

This library is designed for use with Plotly Dash. The components have all been designed to provide functionality similar to Dash's core Loading component, and will display a loading spinner whilst the underlying children are re-rendering.

The spinners in it have been adapted for use from a number of other existing libraries:

• react-spinners-kit

The majority of spinner names have been retained from the originals, but some have been amended where there were name clashes.

---

Installation

Dash Spinners is available through PyPI, and can be installed with pip:

pip install dash-spinner

---

Basic Usage

Once installed, you can make use of the components as follows:

import dash_spinner
from dash import Dash
app = Dash(__name__)

app.layout = dash_spinner.DashSpinner(
                                    Size=30,
                                    Color='#00ff89',
                                    spinner_type="PushSpinner",
                                    loading=True
                                    )
if __name__ == '__main__':
    app.run_server(debug=True)

• Using @callbacks

import dash_spinner
from dash import Dash,html,callback,Input, Output
import time

app = Dash(__name__)
app.layout = html.Div(children=[dash_spinner.DashSpinner(
                                    id = 'dash-spinner',
                                    Size=30,
                                    Color='#00ff89',
                                    spinner_type="PushSpinner",
                                    loading=True
                                    ),
                html.Div(id="input")])
@callback(Output('dash-spinner', 'loading'), Input('input', 'children'))
def display_output(value):
    time.sleep(10)
    return False
if __name__ == '__main__':
    app.run_server(debug=True)

All Dash Spinner

Dash Spinner Attributes

There are a number of attributes which are common across all spinners. These are:

• id (string; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.
• Size (number; required): Number Required
• Color (string; required): CSS RGB and Hex Color codes
• spinner_type (string; required):Property that determines which spinner to show one of BallSpinner ClapSpinner BarsSpinner CircleSpinner ClassicSpinner CombSpinner CubeSpinner DominoSpinner FillSpinner FireworkSpinner FlagSpinner FlapperSpinner GooSpinner GridSpinner GuardSpinner HeartSpinner HoopSpinner ImpulseSpinner JellyfishSpinner MagicSpinner MetroSpinner PongSpinner PulseSpinner PushSpinner RainbowSpinner RingSpinner RotateSpinner SequenceSpinner SphereSpinner SpiralSpinner SwapSpinner SwishSpinner TraceSpinner WaveSpinner WhisperSpinner
• loading (boolean; required True or False): Whether the Spinner should show on app start-up before the loading state has been determined.