tabler/pages/_docs/spinners.md

---
title: Spinners
menu: docs.spinners
bootstrap-link: components/spinners/
done: true
---

### Default markup

{% capture code %}
{% include ui/spinner.html %}
{% endcapture %}
{% include example.html code=code %}


### Colors

{% capture code %}
{% for color in site.colors %}
{% assign c = color[0] %}
{% include ui/spinner.html color=c %}
{% endfor %}
{% endcapture %}
{% include example.html code=code %}

### Size

{% capture code %}
{% include ui/spinner.html %}
{% include ui/spinner.html size="sm" %}
{% endcapture %}
{% include example.html code=code %}

### Growing spinner

{% capture code %}
{% include ui/spinner.html type="grow" %}
{% endcapture %}
{% include example.html code=code %}

{% capture code %}
{% for color in site.colors %}
{% assign c = color[0] %}
{% include ui/spinner.html color=c type="grow" %}
{% endfor %}
{% endcapture %}
{% include example.html code=code %}

### Buttons

{% capture code %}
{% include ui/button.html spinner=true text="Button" color="primary" %}
{% include ui/button.html spinner=true text="Button" color="danger" %}
{% include ui/button.html spinner=true text="Button" color="warning" %}
{% include ui/button.html spinner=true color="success" %}
{% include ui/button.html spinner=true color="secondary" %}
{% endcapture %}
{% include example.html code=code %}