diff --git a/js/angular/directive/spinner.js b/js/angular/directive/spinner.js
index accd22eb212..471264d7db3 100644
--- a/js/angular/directive/spinner.js
+++ b/js/angular/directive/spinner.js
@@ -156,6 +156,15 @@
*
* ```
*
+ * ## Spinner Colors
+ * Like with most of Ionic's other components, spinners can also be styled using
+ * Ionic's standard color naming convention. For example:
+ *
+ * ```html
+ *
+ * ```
+ *
+ *
* ## Styling SVG with CSS
* One cool thing about SVG is its ability to be styled with CSS! Some of the properties
* have different names, for example, SVG uses the term `stroke` instead of `border`, and
@@ -170,10 +179,6 @@
* }
* ```
*
- * By default, the spinners are designed to be above a light background color. If the spinner
- * is going to be sitting on a dark background color you can add the `.spinner-inverse` CSS
- * class to the directive.
- *
*/
IonicModule
.directive('ionSpinner', function() {
diff --git a/scss/_spinner.scss b/scss/_spinner.scss
index 56eea027448..e5a49d7260b 100644
--- a/scss/_spinner.scss
+++ b/scss/_spinner.scss
@@ -5,16 +5,48 @@
.spinner {
svg {
- width: 28px;
- height: 28px;
+ width: $spinner-width;
+ height: $spinner-height;
}
- stroke: #444;
- fill: #444;
+ stroke: $spinner-default-stroke;
+ fill: $spinner-default-fill;
- &.spinner-inverse {
- stroke: #fff;
- fill: #fff;
+ &.spinner-light {
+ stroke: $spinner-light-stroke;
+ fill: $spinner-light-fill;
+ }
+ &.spinner-stable {
+ stroke: $spinner-stable-stroke;
+ fill: $spinner-stable-fill;
+ }
+ &.spinner-positive {
+ stroke: $spinner-positive-stroke;
+ fill: $spinner-positive-fill;
+ }
+ &.spinner-calm {
+ stroke: $spinner-calm-stroke;
+ fill: $spinner-calm-fill;
+ }
+ &.spinner-balanced {
+ stroke: $spinner-balanced-stroke;
+ fill: $spinner-balanced-fill;
+ }
+ &.spinner-assertive {
+ stroke: $spinner-assertive-stroke;
+ fill: $spinner-assertive-fill;
+ }
+ &.spinner-energized {
+ stroke: $spinner-energized-stroke;
+ fill: $spinner-energized-fill;
+ }
+ &.spinner-royal {
+ stroke: $spinner-royal-stroke;
+ fill: $spinner-royal-fill;
+ }
+ &.spinner-dark {
+ stroke: $spinner-dark-stroke;
+ fill: $spinner-dark-fill;
}
}
@@ -29,17 +61,16 @@
.spinner-spiral {
.stop1 {
- stop-color: #fff;
+ stop-color: $spinner-light-fill;
stop-opacity: 0;
}
- &.spinner-inverse {
+ &.spinner-light {
.stop1 {
- stop-color: #000;
+ stop-color: $spinner-default-fill;
}
.stop2 {
- stop-color: #fff;
+ stop-color: $spinner-light-fill;
}
}
}
-
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4f9a8791819..94d7a2f3d58 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -680,6 +680,43 @@ $badge-default-bg: transparent !default;
$badge-default-text: #AAAAAA !default;
+// Spinners
+// -------------------------------
+
+$spinner-width: 28px !default;
+$spinner-height: 28px !default;
+
+$spinner-light-stroke: $light !default;
+$spinner-light-fill: $light !default;
+
+$spinner-stable-stroke: $stable !default;
+$spinner-stable-fill: $stable !default;
+
+$spinner-positive-stroke: $positive !default;
+$spinner-positive-fill: $positive !default;
+
+$spinner-calm-stroke: $calm !default;
+$spinner-calm-fill: $calm !default;
+
+$spinner-balanced-stroke: $balanced !default;
+$spinner-balanced-fill: $balanced !default;
+
+$spinner-assertive-stroke: $assertive !default;
+$spinner-assertive-fill: $assertive !default;
+
+$spinner-energized-stroke: $energized !default;
+$spinner-energized-fill: $energized !default;
+
+$spinner-royal-stroke: $royal !default;
+$spinner-royal-fill: $royal !default;
+
+$spinner-dark-stroke: $dark !default;
+$spinner-dark-fill: $dark !default;
+
+$spinner-default-stroke: $dark !default;
+$spinner-default-fill: $dark !default;
+
+
// Z-Indexes
// -------------------------------
diff --git a/test/html/spinners.html b/test/html/spinners.html
new file mode 100644
index 00000000000..2115fc0a2b6
--- /dev/null
+++ b/test/html/spinners.html
@@ -0,0 +1,120 @@
+
+
+
+
+ Spinners
+
+
+
+
+
+
+
+
+
+
+
+