Conversation
There was a problem hiding this comment.
Properties should be ordered width, height, margin-top, margin-left, font-size, border-width, border-radius
|
(Note: Will need squashing when merging) |
|
niiiice +1 |
|
+1 |
|
CC: @mdo for review |
|
+1 |
|
+1 |
| border-radius: 50%; | ||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-dots-variant($color-first, $color-second, $width, $variant: "base") { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
|
|
||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-hourglass-variant($color) { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| border-radius: 50%; | ||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-comet-variant($color) { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| border-radius: 50%; | ||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-circle-variant($color-first, $color-second) { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| min-width: $size; | ||
| min-height: $size; | ||
|
|
||
| &:before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| z-index: $zindex-spinner; | ||
| text-indent: -99999px; | ||
|
|
||
| &:before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| border-radius: 50%; | ||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-dots-variant($color-first, $color-second, $width, $variant: "base") { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
|
|
||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-hourglass-variant($color) { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| border-radius: 50%; | ||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-comet-variant($color) { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| border-radius: 50%; | ||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-circle-variant($color-first, $color-second) { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| min-width: $size; | ||
| min-height: $size; | ||
|
|
||
| &:before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| z-index: $zindex-spinner; | ||
| text-indent: -99999px; | ||
|
|
||
| &:before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| border-radius: 50%; | ||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-dots-variant($color-first, $color-second, $width, $variant: "base") { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
|
|
||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-hourglass-variant($color) { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| border-radius: 50%; | ||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-comet-variant($color) { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| border-radius: 50%; | ||
| } | ||
|
|
||
| &:not(:required):before { |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| } | ||
|
|
||
| @mixin spinner-circle-variant($color-first, $color-second) { | ||
| &:not(.spinner-fallback):before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| min-width: $size; | ||
| min-height: $size; | ||
|
|
||
| &:before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
| z-index: $zindex-spinner; | ||
| text-indent: -99999px; | ||
|
|
||
| &:before, |
There was a problem hiding this comment.
Begin pseudo elements with double colons: ::
|
@mdo It's been while but since IE9 support is officially dropped, I updated the PR and removed all fallbacks as CSS animations are supported natively in IE10+. Anything left before it could be merged in and included in v4? |
|
Hi @LKay you have build error see : https://travis-ci.org/twbs/bootstrap/jobs/218307896#L236 |
|
👍 |
|
Coming in #22960 with v4.1. |
10 participants
Adds simple, lightweight spinners to Bootstrap 4 as it was mentioned on nice to have feature list (#17021).
Includes 4 types of spinners, supports bootstrap colors, sizes and different positioning.
Works out of the box for new browsers. To support IE9, small fallback plugin is included which inserts special element instead of using
:beforeelement and basic animation for rotating the element.Some basic tests are also included.
Can be easily extended with new spinner variations if they are compatible with single element CSS spinner such as Single Element CSS Spinners or Loaders Kit