mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 03:00:58 +08:00
feat(spinner): add circular spinner for MD default (#19052)
This commit is contained in:
Adam Bradley
@ -417,7 +417,7 @@ ion-infinite-scroll,method,complete,complete() => Promise<void>
|
|||||||
ion-infinite-scroll,event,ionInfinite,void,true
|
ion-infinite-scroll,event,ionInfinite,void,true
|
||||||
|
|
||||||
ion-infinite-scroll-content,none
|
ion-infinite-scroll-content,none
|
||||||
ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
|
ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
|
||||||
ion-infinite-scroll-content,prop,loadingText,string | undefined,undefined,false,false
|
ion-infinite-scroll-content,prop,loadingText,string | undefined,undefined,false,false
|
||||||
|
|
||||||
ion-input,scoped
|
ion-input,scoped
|
||||||
@ -585,7 +585,7 @@ ion-loading,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any)
|
|||||||
ion-loading,prop,message,string | undefined,undefined,false,false
|
ion-loading,prop,message,string | undefined,undefined,false,false
|
||||||
ion-loading,prop,mode,"ios" | "md",undefined,false,false
|
ion-loading,prop,mode,"ios" | "md",undefined,false,false
|
||||||
ion-loading,prop,showBackdrop,boolean,true,false,false
|
ion-loading,prop,showBackdrop,boolean,true,false,false
|
||||||
ion-loading,prop,spinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
|
ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
|
||||||
ion-loading,prop,translucent,boolean,false,false,false
|
ion-loading,prop,translucent,boolean,false,false,false
|
||||||
ion-loading,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
|
ion-loading,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
|
||||||
ion-loading,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
|
ion-loading,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
|
||||||
@ -892,7 +892,7 @@ ion-refresher,event,ionStart,void,true
|
|||||||
ion-refresher-content,none
|
ion-refresher-content,none
|
||||||
ion-refresher-content,prop,pullingIcon,null | string | undefined,undefined,false,false
|
ion-refresher-content,prop,pullingIcon,null | string | undefined,undefined,false,false
|
||||||
ion-refresher-content,prop,pullingText,string | undefined,undefined,false,false
|
ion-refresher-content,prop,pullingText,string | undefined,undefined,false,false
|
||||||
ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
|
ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
|
||||||
ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,false
|
ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,false
|
||||||
|
|
||||||
ion-reorder,shadow
|
ion-reorder,shadow
|
||||||
@ -1098,7 +1098,7 @@ ion-slides,css-prop,--bullet-background-active
|
|||||||
ion-spinner,shadow
|
ion-spinner,shadow
|
||||||
ion-spinner,prop,color,string | undefined,undefined,false,false
|
ion-spinner,prop,color,string | undefined,undefined,false,false
|
||||||
ion-spinner,prop,duration,number | undefined,undefined,false,false
|
ion-spinner,prop,duration,number | undefined,undefined,false,false
|
||||||
ion-spinner,prop,name,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | undefined,undefined,false,false
|
ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | undefined,undefined,false,false
|
||||||
ion-spinner,prop,paused,boolean,false,false,false
|
ion-spinner,prop,paused,boolean,false,false,false
|
||||||
ion-spinner,css-prop,--color
|
ion-spinner,css-prop,--color
|
||||||
|
|
||||||
|
|||||||
@ -58,10 +58,10 @@ The `ion-infinite-scroll-content` component is not supported in React.
|
|||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
| Property | Attribute | Description | Type | Default |
|
| Property | Attribute | Description | Type | Default |
|
||||||
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
|
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
|
||||||
| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
|
| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
|
||||||
| `loadingText` | `loading-text` | Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
|
| `loadingText` | `loading-text` | Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
|
||||||
|
|
||||||
|
|
||||||
## Dependencies
|
## Dependencies
|
||||||
|
|||||||
@ -174,20 +174,20 @@ export default {
|
|||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
| Property | Attribute | Description | Type | Default |
|
| Property | Attribute | Description | Type | Default |
|
||||||
| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
|
| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
|
||||||
| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` |
|
| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` |
|
||||||
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` |
|
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` |
|
||||||
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
|
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
|
||||||
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` |
|
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` |
|
||||||
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
|
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
|
||||||
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
|
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
|
||||||
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
|
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
|
||||||
| `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | `undefined` |
|
| `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | `undefined` |
|
||||||
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
|
||||||
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` |
|
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` |
|
||||||
| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
|
| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
|
||||||
| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
|
| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
|
||||||
|
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|||||||
@ -9,12 +9,12 @@ The refresher content contains the text, icon and spinner to display during a pu
|
|||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
| Property | Attribute | Description | Type | Default |
|
| Property | Attribute | Description | Type | Default |
|
||||||
| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
|
| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
|
||||||
| `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `null \| string \| undefined` | `undefined` |
|
| `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `null \| string \| undefined` | `undefined` |
|
||||||
| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
|
| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
|
||||||
| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
|
| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
|
||||||
| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
|
| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
|
||||||
|
|
||||||
|
|
||||||
## Dependencies
|
## Dependencies
|
||||||
|
|||||||
@ -110,12 +110,12 @@ export const SpinnerExample: React.FunctionComponent = () => (
|
|||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
| Property | Attribute | Description | Type | Default |
|
| Property | Attribute | Description | Type | Default |
|
||||||
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- |
|
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
|
||||||
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
|
||||||
| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | `number \| undefined` | `undefined` |
|
| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | `number \| undefined` | `undefined` |
|
||||||
| `name` | `name` | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` |
|
| `name` | `name` | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` |
|
||||||
| `paused` | `paused` | If `true`, the spinner's animation will be paused. | `boolean` | `false` |
|
| `paused` | `paused` | If `true`, the spinner's animation will be paused. | `boolean` | `false` |
|
||||||
|
|
||||||
|
|
||||||
## CSS Custom Properties
|
## CSS Custom Properties
|
||||||
|
|||||||
@ -2,41 +2,6 @@ import { SpinnerConfigs } from './spinner-interface';
|
|||||||
|
|
||||||
const spinners = {
|
const spinners = {
|
||||||
|
|
||||||
'lines': {
|
|
||||||
dur: 1000,
|
|
||||||
lines: 12,
|
|
||||||
fn: (dur: number, index: number, total: number) => {
|
|
||||||
const transform = `rotate(${ 30 * index + (index < 6 ? 180 : -180) }deg)`;
|
|
||||||
const animationDelay = `${ (dur * index / total) - dur }ms`;
|
|
||||||
|
|
||||||
return {
|
|
||||||
y1: 17,
|
|
||||||
y2: 29,
|
|
||||||
style: {
|
|
||||||
'transform': transform,
|
|
||||||
'animation-delay': animationDelay,
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
'lines-small': {
|
|
||||||
dur: 1000,
|
|
||||||
lines: 12,
|
|
||||||
fn: (dur: number, index: number, total: number) => {
|
|
||||||
const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
|
|
||||||
const animationDelay = `${ (dur * index / total) - dur }ms`;
|
|
||||||
return {
|
|
||||||
y1: 12,
|
|
||||||
y2: 20,
|
|
||||||
style: {
|
|
||||||
'transform': transform,
|
|
||||||
'animation-delay': animationDelay,
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
'bubbles': {
|
'bubbles': {
|
||||||
dur: 1000,
|
dur: 1000,
|
||||||
circles: 9,
|
circles: 9,
|
||||||
@ -72,6 +37,23 @@ const spinners = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
'circular': {
|
||||||
|
dur: 1400,
|
||||||
|
elmDuration: true,
|
||||||
|
circles: 1,
|
||||||
|
fn: () => {
|
||||||
|
return {
|
||||||
|
r: 20,
|
||||||
|
cx: 44,
|
||||||
|
cy: 44,
|
||||||
|
fill: 'none',
|
||||||
|
viewBox: '22 22 44 44',
|
||||||
|
transform: 'translate(0,0)',
|
||||||
|
style: {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
'crescent': {
|
'crescent': {
|
||||||
dur: 750,
|
dur: 750,
|
||||||
circles: 1,
|
circles: 1,
|
||||||
@ -96,7 +78,43 @@ const spinners = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'lines': {
|
||||||
|
dur: 1000,
|
||||||
|
lines: 12,
|
||||||
|
fn: (dur: number, index: number, total: number) => {
|
||||||
|
const transform = `rotate(${ 30 * index + (index < 6 ? 180 : -180) }deg)`;
|
||||||
|
const animationDelay = `${ (dur * index / total) - dur }ms`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
y1: 17,
|
||||||
|
y2: 29,
|
||||||
|
style: {
|
||||||
|
'transform': transform,
|
||||||
|
'animation-delay': animationDelay,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'lines-small': {
|
||||||
|
dur: 1000,
|
||||||
|
lines: 12,
|
||||||
|
fn: (dur: number, index: number, total: number) => {
|
||||||
|
const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
|
||||||
|
const animationDelay = `${ (dur * index / total) - dur }ms`;
|
||||||
|
return {
|
||||||
|
y1: 12,
|
||||||
|
y2: 20,
|
||||||
|
style: {
|
||||||
|
'transform': transform,
|
||||||
|
'animation-delay': animationDelay,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SPINNERS: SpinnerConfigs = spinners;
|
export const SPINNERS: SpinnerConfigs = spinners;
|
||||||
|
|||||||
@ -9,6 +9,7 @@ export interface SpinnerConfig {
|
|||||||
dur: number;
|
dur: number;
|
||||||
circles?: number;
|
circles?: number;
|
||||||
lines?: number;
|
lines?: number;
|
||||||
|
elmDuration?: boolean;
|
||||||
fn: (dur: number, index: number, total: number) => SpinnerData;
|
fn: (dur: number, index: number, total: number) => SpinnerData;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -16,5 +17,9 @@ export interface SpinnerData {
|
|||||||
r?: number;
|
r?: number;
|
||||||
y1?: number;
|
y1?: number;
|
||||||
y2?: number;
|
y2?: number;
|
||||||
|
cx?: number;
|
||||||
|
cy?: number;
|
||||||
style: any;
|
style: any;
|
||||||
|
viewBox?: string;
|
||||||
|
transform?: string;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -99,10 +99,29 @@ svg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Spinner: circular
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
:host(.spinner-circular) {
|
||||||
|
animation: spinner-circular linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(.spinner-circular) circle {
|
||||||
|
animation: spinner-circular-inner ease-in-out infinite;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-dasharray: 80px, 200px;
|
||||||
|
stroke-dashoffset: 0px;
|
||||||
|
stroke-width: 3.6;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Spinner: paused
|
// Spinner: paused
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
:host(.spinner-paused) svg {
|
:host(.spinner-paused),
|
||||||
|
:host(.spinner-paused) svg,
|
||||||
|
:host(.spinner-paused) circle {
|
||||||
animation-play-state: paused;
|
animation-play-state: paused;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -162,3 +181,24 @@ svg {
|
|||||||
opacity: .9;
|
opacity: .9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes spinner-circular {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spinner-circular-inner {
|
||||||
|
0% {
|
||||||
|
stroke-dasharray: 1px, 200px;
|
||||||
|
stroke-dashoffset: 0px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
stroke-dasharray: 100px, 200px;
|
||||||
|
stroke-dashoffset: -15px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
stroke-dasharray: 100px, 200px;
|
||||||
|
stroke-dashoffset: -125px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -38,19 +38,20 @@ export class Spinner implements ComponentInterface {
|
|||||||
@Prop() paused = false;
|
@Prop() paused = false;
|
||||||
|
|
||||||
private getName(): SpinnerTypes {
|
private getName(): SpinnerTypes {
|
||||||
const name = this.name || config.get('spinner');
|
const spinnerName = this.name || config.get('spinner');
|
||||||
const mode = getIonMode(this);
|
const mode = getIonMode(this);
|
||||||
if (name) {
|
if (spinnerName) {
|
||||||
return name;
|
return spinnerName;
|
||||||
}
|
}
|
||||||
return (mode === 'ios') ? 'lines' : 'crescent';
|
return (mode === 'ios') ? 'lines' : 'circular';
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const mode = getIonMode(this);
|
const self = this;
|
||||||
const name = this.getName();
|
const mode = getIonMode(self);
|
||||||
const spinner = SPINNERS[name] || SPINNERS['lines'];
|
const spinnerName = self.getName();
|
||||||
const duration = (typeof this.duration === 'number' && this.duration > 10 ? this.duration : spinner.dur);
|
const spinner = SPINNERS[spinnerName] || SPINNERS['lines'];
|
||||||
|
const duration = (typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur);
|
||||||
const svgs: any[] = [];
|
const svgs: any[] = [];
|
||||||
|
|
||||||
if (spinner.circles !== undefined) {
|
if (spinner.circles !== undefined) {
|
||||||
@ -67,11 +68,13 @@ export class Spinner implements ComponentInterface {
|
|||||||
return (
|
return (
|
||||||
<Host
|
<Host
|
||||||
class={{
|
class={{
|
||||||
...createColorClasses(this.color),
|
...createColorClasses(self.color),
|
||||||
[mode]: true,
|
[mode]: true,
|
||||||
[`spinner-${name}`]: true,
|
[`spinner-${spinnerName}`]: true,
|
||||||
'spinner-paused': !!this.paused || config.getBoolean('_testing')
|
'spinner-paused': !!self.paused || config.getBoolean('_testing')
|
||||||
}}
|
}}
|
||||||
|
role="progressbar"
|
||||||
|
style={spinner.elmDuration ? { animationDuration: duration + 'ms' } : {}}
|
||||||
>
|
>
|
||||||
{svgs}
|
{svgs}
|
||||||
</Host>
|
</Host>
|
||||||
@ -81,21 +84,27 @@ export class Spinner implements ComponentInterface {
|
|||||||
|
|
||||||
const buildCircle = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {
|
const buildCircle = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {
|
||||||
const data = spinner.fn(duration, index, total);
|
const data = spinner.fn(duration, index, total);
|
||||||
data.style['animation-duration'] = `${duration}ms`;
|
data.style['animation-duration'] = duration + 'ms';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg viewBox="0 0 64 64" style={data.style}>
|
<svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>
|
||||||
<circle transform="translate(32,32)" r={data.r}></circle>
|
<circle
|
||||||
|
transform={data.transform || 'translate(32,32)'}
|
||||||
|
cx={data.cx}
|
||||||
|
cy={data.cy}
|
||||||
|
r={data.r}
|
||||||
|
style={spinner.elmDuration ? { animationDuration: duration + 'ms' } : {}}
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {
|
const buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {
|
||||||
const data = spinner.fn(duration, index, total);
|
const data = spinner.fn(duration, index, total);
|
||||||
data.style['animation-duration'] = `${duration}ms`;
|
data.style['animation-duration'] = duration + 'ms';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg viewBox="0 0 64 64" style={data.style}>
|
<svg viewBox={data.viewBox || '0 0 64 64'} style={data.style}>
|
||||||
<line transform="translate(32,32)" y1={data.y1} y2={data.y2}></line>
|
<line transform="translate(32,32)" y1={data.y1} y2={data.y2}></line>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -27,62 +27,70 @@
|
|||||||
</ion-list-header>
|
</ion-list-header>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start"></ion-spinner>
|
<ion-spinner slot="start"></ion-spinner>
|
||||||
Default Spinner
|
Platform Default Spinner
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="lines"></ion-spinner>
|
<ion-spinner slot="start" name="lines"></ion-spinner>
|
||||||
Lines
|
<code>lines</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="lines-small"></ion-spinner>
|
<ion-spinner slot="start" name="lines-small"></ion-spinner>
|
||||||
Lines Small
|
<code>lines-small</code>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-spinner slot="start" name="circular"></ion-spinner>
|
||||||
|
<code>circular</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="dots"></ion-spinner>
|
<ion-spinner slot="start" name="dots"></ion-spinner>
|
||||||
Dots
|
<code>dots</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="bubbles"></ion-spinner>
|
<ion-spinner slot="start" name="bubbles"></ion-spinner>
|
||||||
Bubbles
|
<code>bubbles</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="circles"></ion-spinner>
|
<ion-spinner slot="start" name="circles"></ion-spinner>
|
||||||
Circles
|
<code>circles</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="crescent"></ion-spinner>
|
<ion-spinner slot="start" name="crescent"></ion-spinner>
|
||||||
Crescent
|
<code>crescent</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" paused></ion-spinner>
|
<ion-spinner slot="start" paused></ion-spinner>
|
||||||
Paused Default Spinner
|
Paused Platform Default Spinner
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="lines" paused></ion-spinner>
|
<ion-spinner slot="start" name="lines" paused></ion-spinner>
|
||||||
Paused Lines
|
<code>lines</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="lines-small" paused></ion-spinner>
|
<ion-spinner slot="start" name="lines-small" paused></ion-spinner>
|
||||||
Paused Lines Small
|
<code>lines-small</code>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-spinner slot="start" name="circular" paused></ion-spinner>
|
||||||
|
<code>circular</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="dots" paused></ion-spinner>
|
<ion-spinner slot="start" name="dots" paused></ion-spinner>
|
||||||
Paused Dots
|
<code>dots</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="bubbles" paused></ion-spinner>
|
<ion-spinner slot="start" name="bubbles" paused></ion-spinner>
|
||||||
Paused Bubbles
|
<code>bubbles</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="circles" paused></ion-spinner>
|
<ion-spinner slot="start" name="circles" paused></ion-spinner>
|
||||||
Paused Circles
|
<code>circles</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start" name="crescent" paused></ion-spinner>
|
<ion-spinner slot="start" name="crescent" paused></ion-spinner>
|
||||||
Paused Crescent
|
<code>crescent</code>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|||||||
@ -22,40 +22,41 @@
|
|||||||
|
|
||||||
<ion-content id="content">
|
<ion-content id="content">
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-list-header>
|
|
||||||
Spinner Loading Indicators
|
|
||||||
</ion-list-header>
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner slot="start"></ion-spinner>
|
<ion-spinner slot="start"></ion-spinner>
|
||||||
Show Default Spinner
|
Platform Default Spinner
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner color="primary" slot="start" name="lines"></ion-spinner>
|
<ion-spinner color="primary" slot="start" name="lines"></ion-spinner>
|
||||||
Show Lines (Primary)
|
<code>lines</code> (primary)
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner color="secondary" slot="start" name="ios-small"></ion-spinner>
|
<ion-spinner color="secondary" slot="start" name="lines-small"></ion-spinner>
|
||||||
Show Lines Small (Secondary)
|
<code>lines-small</code> (secondary)
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner color="danger" slot="start" name="dots"></ion-spinner>
|
<ion-spinner color="tertiary" slot="start" name="circular"></ion-spinner>
|
||||||
Show Dots (Danger)
|
<code>circular</code> (tertiary)
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner color="light" slot="start" name="bubbles"></ion-spinner>
|
<ion-spinner color="success" slot="start" name="dots"></ion-spinner>
|
||||||
Show Bubbles (Light)
|
<code>dots</code> (success)
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner color="dark" slot="start" name="circles"></ion-spinner>
|
<ion-spinner color="warning" slot="start" name="bubbles"></ion-spinner>
|
||||||
Show Circles (Dark)
|
<code>bubbles</code> (warning)
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner color="primary" slot="start" name="crescent"></ion-spinner>
|
<ion-spinner color="danger" slot="start" name="circles"></ion-spinner>
|
||||||
Show Crescent (Primary)
|
<code>circles</code> (danger)
|
||||||
</ion-item>
|
</ion-item>
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<ion-spinner color="secondary" slot="start" paused></ion-spinner>
|
<ion-spinner color="dark" slot="start" name="crescent"></ion-spinner>
|
||||||
Show Paused Default Spinner (Secondary)
|
<code>crescent</code> (dark)
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-spinner color="medium" slot="start" name="lines" paused></ion-spinner>
|
||||||
|
<code>lines</code> (paused, medium)
|
||||||
</ion-item>
|
</ion-item>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|||||||
@ -14,7 +14,8 @@
|
|||||||
<body>
|
<body>
|
||||||
<ion-spinner></ion-spinner>
|
<ion-spinner></ion-spinner>
|
||||||
<ion-spinner name="lines"></ion-spinner>
|
<ion-spinner name="lines"></ion-spinner>
|
||||||
<ion-spinner name="ios-small"></ion-spinner>
|
<ion-spinner name="lines-small"></ion-spinner>
|
||||||
|
<ion-spinner name="circular"></ion-spinner>
|
||||||
<ion-spinner name="dots"></ion-spinner>
|
<ion-spinner name="dots"></ion-spinner>
|
||||||
<ion-spinner name="bubbles"></ion-spinner>
|
<ion-spinner name="bubbles"></ion-spinner>
|
||||||
<ion-spinner name="circles"></ion-spinner>
|
<ion-spinner name="circles"></ion-spinner>
|
||||||
|
|||||||
Reference in New Issue
Block a user