diff --git a/packages/core/src/components/spinner/readme.md b/packages/core/src/components/spinner/readme.md
index 0ebf2c689c..05caf0ac67 100644
--- a/packages/core/src/components/spinner/readme.md
+++ b/packages/core/src/components/spinner/readme.md
@@ -1,92 +1,33 @@
# ion-spinner
-The `ion-spinner` component provides a variety of animated SVG spinners.
-Spinners enables you to give users feedback that the app is actively
-processing/thinking/waiting/chillin’ out, or whatever you’d like it to indicate.
-By default, the `ion-refresher` feature uses this spinner component while it's
-the refresher is in the `refreshing` state.
+The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on.
-Ionic offers a handful of spinners out of the box, and by default, it will use
-the appropriate spinner for the platform on which it’s running.
-
-
-
-
- lines
- |
-
-
- |
-
-
-
- lines-small
- |
-
-
- |
-
-
-
- bubbles
- |
-
-
- |
-
-
-
- circles
- |
-
-
- |
-
-
-
- crescent
- |
-
-
- |
-
-
-
- dots
- |
-
-
- |
-
-
-
-The following code would use the default spinner for the platform it's
-running from. If it's neither iOS or Android, it'll default to use `ios`.
+The default spinner to use is based on the platform. The default spinner for `ios` is `"lines"`, and the default for `android` is `"crescent"`. If the platform is not `ios` or `android`, the spinner will default to `crescent`. If the `name` property is set, then that spinner will be used instead of the platform specific spinner.
```html
+
-```
-By setting the `name` property, you can specify which predefined spinner to
-use, no matter what the platform is.
+
+
-```html
+
+
+
+
+
+
+
-```
-## Styling SVG with CSS
-One cool thing about SVG is its ability to be styled with CSS! One thing to note
-is that some of the CSS properties on an SVG element have different names. For
-example, SVG uses the term `stroke` instead of `border`, and `fill` instead
-of `background-color`.
+
+
-```css
-ion-spinner{
- width: 28px;
- height: 28px;
- stroke: #444;
- fill: #222;
-}
+
+
+
+
+
```
@@ -108,7 +49,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
number
-How long it takes it to do one loop.
+Duration of the spinner animation in milliseconds. Default varies based on the spinner name.
#### mode
@@ -124,14 +65,16 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string
-SVG spinner name.
+The name of the SVG spinner to use. If a name is not provided, the platform's default
+spinner will be used. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, `"bubbles"`,
+`"circles"`, `"crescent"`.
#### paused
boolean
-If true, pause the animation.
+If true, the spinner's animation will be paused. Defaults to `false`.
## Attributes
@@ -149,7 +92,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
number
-How long it takes it to do one loop.
+Duration of the spinner animation in milliseconds. Default varies based on the spinner name.
#### mode
@@ -165,14 +108,16 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string
-SVG spinner name.
+The name of the SVG spinner to use. If a name is not provided, the platform's default
+spinner will be used. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, `"bubbles"`,
+`"circles"`, `"crescent"`.
#### paused
boolean
-If true, pause the animation.
+If true, the spinner's animation will be paused. Defaults to `false`.
diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx
index f559a9903d..1b2168a822 100644
--- a/packages/core/src/components/spinner/spinner.tsx
+++ b/packages/core/src/components/spinner/spinner.tsx
@@ -32,17 +32,19 @@ export class Spinner {
@Prop() mode: 'ios' | 'md';
/**
- * How long it takes it to do one loop.
+ * Duration of the spinner animation in milliseconds. The default varies based on the spinner.
*/
@Prop() duration: number;
/**
- * SVG spinner name.
+ * The name of the SVG spinner to use. If a name is not provided, the platform's default
+ * spinner will be used. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, `"bubbles"`,
+ * `"circles"`, `"crescent"`.
*/
@Prop() name: string;
/**
- * If true, pause the animation.
+ * If true, the spinner's animation will be paused. Defaults to `false`.
*/
@Prop() paused = false;
diff --git a/packages/core/src/components/spinner/test/basic/index.html b/packages/core/src/components/spinner/test/basic/index.html
index cce226e713..5efbdc2b7e 100644
--- a/packages/core/src/components/spinner/test/basic/index.html
+++ b/packages/core/src/components/spinner/test/basic/index.html
@@ -29,7 +29,7 @@
Show Lines
-
+
Show Lines Small