{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``LoadingSpinner`` is a boolean indicator providing a visual representation of the loading status. If the `value` is set to `True` the spinner will rotate while setting it to `False` will disable the rotating segment.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
    "\n",
    "* **``bgcolor``** (str): The color of spinner background segment, either 'light' or 'dark'\n",
    "* **``color``** (str): The color of the spinning segment, one of 'primary', 'secondary', 'success', 'info', 'warn', 'danger', 'light', 'dark'\n",
    "* **``value``** (boolean): Whether the indicator is spinning or not.\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `LoadingSpinner` can be instantiated in a spinning or idle state:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "idle = pn.indicators.LoadingSpinner(value=False, width=100, height=100)\n",
    "loading = pn.indicators.LoadingSpinner(value=True, width=100, height=100)\n",
    "\n",
    "pn.Row(idle, loading)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `LoadingSpinner` indicator also supports a range of spinner colors and backgrounds:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid = pn.GridBox('', 'light', 'dark', ncols=3)\n",
    "\n",
    "for color in pn.indicators.LoadingSpinner.param.color.objects:\n",
    "    dark = pn.indicators.LoadingSpinner(width=50, height=50, value=True, color=color, bgcolor='dark')\n",
    "    light = pn.indicators.LoadingSpinner(width=50, height=50, value=True, color=color, bgcolor='light')\n",
    "    grid.extend((color, light, dark))\n",
    "\n",
    "grid"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
