diff options
| author | XhmikosR <xhmikosr@gmail.com> | 2018-11-11 16:47:23 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2018-11-13 09:21:57 +0300 |
| commit | dafb498f75afe2552b8603ac59fe855b488a97e8 (patch) | |
| tree | 9630bc27700bc98447695069e5ae2a951a726403 /site/docs | |
| parent | 5afc708961751848cbd32209f832e0d7ebdec75e (diff) | |
Spinners: show all color variants.
Diffstat (limited to 'site/docs')
| -rw-r--r-- | site/docs/4.1/components/spinners.md | 22 |
1 files changed, 7 insertions, 15 deletions
diff --git a/site/docs/4.1/components/spinners.md b/site/docs/4.1/components/spinners.md index 878c2a7de4..d150670029 100644 --- a/site/docs/4.1/components/spinners.md +++ b/site/docs/4.1/components/spinners.md @@ -23,18 +23,13 @@ Use the border spinners for a lightweight loading indicator. ### Colors -The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. Here's the regular border spinner in blue. +The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. You can use any of our text color utilities on the standard spinner. -<div class="bd-example"> - <div class="spinner-border text-primary" role="status">Loading...</div> -</div> - -Use any of our text color utilities on the standard spinner. - -{% highlight html %} +{% capture example %} {% for color in site.data.theme-colors %} <div class="spinner-border text-{{ color.name }}" role="status">Loading...</div>{% endfor %} -{% endhighlight %} +{% endcapture %} +{% include example.html content=example %} {% capture callout %} **Why not use `border-color` utilities?** Each border spinner specifies a `transparent` border for at least one side, so `.border-{color}` utilities would override that. @@ -52,14 +47,11 @@ If you don't fancy a border spinner, switch to the grow spinner. While it doesn' Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color]. Here it is in blue, along with the supported variants. -<div class="bd-example"> - <div class="spinner-grow text-primary" role="status">Loading...</div> -</div> - -{% highlight html %} +{% capture example %} {% for color in site.data.theme-colors %} <div class="spinner-grow text-{{ color.name }}" role="status">Loading...</div>{% endfor %} -{% endhighlight %} +{% endcapture %} +{% include example.html content=example %} ## Alignment |