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 | スピナーアニメーションの持続時間（ミリ秒）。デフォルトはスピナーによって異なる。 |
| 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 | trueの場合、スピナーのアニメーションは一時停止されます。 |
| 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 | スピナーの色 |
Slots
No slots available for this component.