#368 introduce ui.spinner

nicegui/elements/spinner.py

@@ -0,0 +1,50 @@
+from typing import Optional
+
+from typing_extensions import Literal
+
+from ..element import Element
+
+SpinnerTypes = Literal[
+    'default',
+    'audio',
+    'ball',
+    'bars',
+    'box',
+    'clock',
+    'comment',
+    'cube',
+    'dots',
+    'facebook',
+    'gears',
+    'grid',
+    'hearts',
+    'hourglass',
+    'infinity',
+    'ios',
+    'orbit',
+    'oval',
+    'pie',
+    'puff',
+    'radio',
+    'rings',
+    'tail',
+]
+
+
+class Spinner(Element):
+
+    def __init__(self, type: Optional[SpinnerTypes] = 'default', *,
+                 size: str = '1em', color: str = 'primary', thickness: float = 5.0):
+        """Spinner
+
+        See `Quasar Spinner <https://quasar.dev/vue-components/spinner>`_ for more information.
+
+        :param type: type of spinner (e.g. "audio", "ball", "bars", ..., default: "default")
+        :param size: size of the spinner (e.g. "3em", "10px", "xl", ..., default: "1em")
+        :param color: color of the spinner (default: "primary")
+        :param thickness: thickness of the spinner (applies to the "default" spinner only, default: 5.0)
+        """
+        super().__init__('q-spinner' if type is 'default' else f'q-spinner-{type}')
+        self._props['size'] = size
+        self._props['color'] = color
+        self._props['thickness'] = thickness

nicegui/ui.py

@@ -41,6 +41,7 @@ from .elements.scene import Scene as scene
 from .elements.select import Select as select
 from .elements.separator import Separator as separator
 from .elements.slider import Slider as slider
+from .elements.spinner import Spinner as spinner
 from .elements.switch import Switch as switch
 from .elements.table import Table as table
 from .elements.time import Time as time

tests/test_spinner.py

@@ -0,0 +1,15 @@
+from selenium.webdriver.common.by import By
+
+from nicegui import ui
+
+from .screen import Screen
+
+
+def test_spinner(screen: Screen):
+    ui.spinner(size='3em', thickness=10)
+
+    screen.open('/')
+    element = screen.find_by_tag('svg')
+    assert element.get_attribute('width') == '3em'
+    assert element.get_attribute('height') == '3em'
+    assert element.find_element(By.TAG_NAME, 'circle').get_attribute('stroke-width') == '10'

website/reference.py

@@ -346,6 +346,13 @@ To overlay an SVG, make the `viewBox` exactly the size of the image and provide
         slider = ui.slider(min=0, max=1, step=0.01, value=0.5)
         ui.circular_progress().bind_value_from(slider, 'value')
 
+    @example(ui.spinner, menu)
+    def spinner_example():
+        with ui.row().style('gap: 1em'):
+            ui.spinner(size='lg')
+            ui.spinner('audio', size='lg', color='green')
+            ui.spinner('dots', size='lg', color='red')
+
     @example(ui.scene, menu)
     def scene_example():
         with ui.scene(width=285, height=285) as scene: