diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx
index 9360c786e2..78aee5ada2 100644
--- a/packages/core/src/components/spinner/spinner.tsx
+++ b/packages/core/src/components/spinner/spinner.tsx
@@ -4,6 +4,99 @@ import { Config } from '../../index';
import { SPINNERS, SpinnerConfig } from './spinner-configs';
+/**
+ * @name Spinner
+ * @description
+ * 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.
+ *
+ * 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
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * @usage
+ * 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`.
+ *
+ * ```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;
+ * }
+ * ```
+ */
@Component({
tag: 'ion-spinner',
styleUrls: {
@@ -20,39 +113,62 @@ export class Spinner {
color: string;
@Prop({ context: 'config' }) config: Config;
- @Prop() duration: number = null;
+
+ /**
+ * @input {string} How long it takes it to do one loop.
+ */
+ @Prop() duration: number;
+
+ /**
+ * @input {string} SVG spinner name.
+ */
@Prop() name: string;
+
+ /**
+ * @input {boolean} If true, pause the animation.
+ */
@Prop() paused: boolean = false;
- ionViewDidLoad() {
- if (this.name === 'ios') {
+ private getName(): string {
+ let name = this.name || this.config.get('spinner');
+ if (!name) {
+ // fallback
+ if (this.mode === 'md') {
+ return 'crescent';
+ } else if (this.mode === 'wp') {
+ return 'circles';
+ } else {
+ return 'lines';
+ }
+ }
+ if (name === 'ios') {
// deprecation warning, renamed in v4
console.warn(`spinner "ios" has been renamed to "lines"`);
-
- } else if (this.name === 'ios-small') {
+ name = 'lines';
+ } else if (name === 'ios-small') {
// deprecation warning, renamed in v4
console.warn(`spinner "ios-small" has been renamed to "lines-sm"`);
+ name = 'lines-sm';
}
+ return name;
}
hostData() {
- const themedClasses = createThemedClasses(this.mode, this.color, `spinner spinner-${this.name}`);
- themedClasses['spinner-paused'] = true;
+ const themedClasses = createThemedClasses(this.mode, this.color, `spinner spinner-${this.getName()}`);
+
+ const spinnerClasses = {
+ ...themedClasses,
+ 'spinner-paused': this.paused
+ }
return {
- class: themedClasses
+ class: spinnerClasses
};
}
render() {
- let name = this.name || this.config.get('spinner', 'lines');
- if (name === 'ios') {
- name = this.name = 'lines';
-
- } else if (this.name === 'ios-small') {
- name = this.name = 'lines-sm';
- }
+ const name = this.getName();
const spinner = SPINNERS[name] || SPINNERS['lines'];
@@ -83,19 +199,11 @@ function buildCircle(spinner: SpinnerConfig, duration: number, index: number, to
const data = spinner.fn(duration, index, total);
data.style.animationDuration = duration + 'ms';
- return h('svg', {
- attrs: {
- 'viewBox': '0 0 64 64'
- },
- style: data.style
- },
- h('circle', {
- attrs: {
- 'r': data.r,
- 'transform': 'translate(32,32)'
- }
- })
- );
+ return (
+
+ );
}
@@ -103,18 +211,9 @@ function buildLine(spinner: SpinnerConfig, duration: number, index: number, tota
const data = spinner.fn(duration, index, total);
data.style.animationDuration = duration + 'ms';
- return h('svg', {
- attrs: {
- 'viewBox': '0 0 64 64'
- },
- style: data.style
- },
- h('line', {
- attrs: {
- 'y1': data.y1,
- 'y2': data.y2,
- 'transform': 'translate(32,32)'
- }
- })
- );
+ return (
+
+ );
}
diff --git a/packages/core/src/components/spinner/test/basic.html b/packages/core/src/components/spinner/test/basic.html
index 14a8b1d245..46999a2881 100644
--- a/packages/core/src/components/spinner/test/basic.html
+++ b/packages/core/src/components/spinner/test/basic.html
@@ -2,11 +2,51 @@
- Ionic Buttons
+ Ionic Spinners
-
+
+
+
+
+ Spinner Loading Indicators
+
+
+
+ Show Default Spinner
+
+
+
+ Show Lines
+
+
+
+ Show Lines Small
+
+
+
+ Show Dots
+
+
+
+ Show Bubbles
+
+
+
+ Show Circles
+
+
+
+ Show Crescent
+
+
+
+ Show Paused Default Spinner
+
+
+
+
\ No newline at end of file