ion-spinner
Spinnerコンポーネントには、さまざまなアニメーションつきのSVG Spinnerが用意されています。Spinnerは、アプリがコンテンツを読み込んだり、ユーザーが待つ必要のある別のプロセスを実行していることを視覚的に示すものです。
基本的な使い方
デフォルトのスピナーは、モードに基づいて決定されます。モードが ios
の場合、スピナーは "lines"
となり、モードが md
の場合、スピナ ーは "circular"
となります。 name
プロパティが設定されている場合は、モード固有のスピナーの代わりに、そのスピナーが使用されます。
テーマ
Colors
Styling
You may use custom CSS to style the spinner. For example, you can resize the spinner by setting the width and height.
CSS カスタムプロパティ
プロパティ
color
Description | 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. |
Attribute | color |
Type | "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined |
Default | undefined |
duration
Description | Duration of the spinner animation in milliseconds. The default varies based on the spinner. |
Attribute | duration |
Type | number | undefined |
Default | undefined |
name
Description | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. |
Attribute | name |
Type | "bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined |
Default | undefined |
paused
Description | If true , the spinner's animation will be paused. |
Attribute | paused |
Type | boolean |
Default | false |
イベント
No events available for this component.
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
Name | Description |
---|---|
--color | Color of the spinner |
Slots
No slots available for this component.