Skip to content

Commit

Permalink
fix(spinners): drop growing spinners
Browse files Browse the repository at this point in the history
  • Loading branch information
ffoodd committed Jul 23, 2020
1 parent 6b19617 commit 1831f13
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 87 deletions.
39 changes: 1 addition & 38 deletions scss/_spinners.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,41 +32,4 @@
}
// End mod

//
// Growing circle
//

@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}

.spinner-grow {
display: inline-block;
width: $spinner-width;
height: $spinner-height;
vertical-align: text-bottom;
// stylelint-disable-next-line declaration-no-important
background-color: currentColor !important; // Boosted mod: ensure .text-* background won't override this
// stylelint-disable-next-line property-blacklist
border-radius: 50%;
opacity: 0;
animation: spinner-grow $spinner-animation-speed linear infinite;
}

.spinner-grow-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
}

// Boosted mod
.spinner-grow-lg {
width: $spinner-width-lg;
height: $spinner-height-lg;
}
// End mod
// Boosted mod: no .spinner-grow
54 changes: 5 additions & 49 deletions site/content/docs/5.0/components/spinners.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Boosted "spinners" can be used to show the loading state in your projects. They'

For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="visually-hidden">Loading...</span>`.

## Border spinner
## Example

Use the border spinners for a lightweight loading indicator.

Expand Down Expand Up @@ -41,28 +41,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
**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.
{{< /callout >}}

## Growing spinner

If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!

{{< example >}}
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}

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.

<!-- Boosted mod -->
{{< example >}}
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}
<!-- End mod -->
<!-- Boosted: no Growing spinner -->

## Alignment

Expand Down Expand Up @@ -121,32 +100,19 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex

## Size

Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that can quickly be used within other components.

<!-- Boosted mod: -sm & -lg -->

### Small
Add `.spinner-border-sm` or `.spinner-border-lg` to make a smaller spinner that can quickly be used within other components.


{{< example >}}
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}

### Large

{{< example >}}
<div class="spinner-border spinner-border-lg" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-lg" role="status">
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}

<!-- End mod -->

## Buttons
Expand All @@ -164,17 +130,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
</button>
{{< /example >}}

{{< example >}}
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
{{< /example >}}

<!-- Boosted: no Growing spinner -->

[color]: {{< docsref "/utilities/colors" >}}
[display]: {{< docsref "/utilities/display" >}}
Expand Down

0 comments on commit 1831f13

Please sign in to comment.