ion-spinner
Contents
Spinnerコンポーネントには、さまざまなアニメーションつきのSVG Spinnerが用意されています。Spinnerは、アプリがコンテンツを読み込んだり、ユーザーが待つ必要のある別のプロセスを実行していることを視覚的に示すものです。
デフォルトのSpinnerはプラットフォームに基づいて使用されます。ios
のデフォルトのSpinnerは"lines"
であり、android
のデフォルトは"crescent"
である。プラットフォームが ios
または android
でない場合、Spinnerはデフォルトで crescent
に設定されます。name
プロパティが設定されている場合、プラットフォーム固有のSpinnerの代わりに指定されたSpinnerが使用されます。
Usage
- Angular
- Javascript
- React
- Stencil
- Vue
<!-- Default Spinner -->
<ion-spinner></ion-spinner>
<!-- Lines -->
<ion-spinner name="lines"></ion-spinner>
<!-- Lines Small -->
<ion-spinner name="lines-small"></ion-spinner>
<!-- Dots -->
<ion-spinner name="dots"></ion-spinner>
<!-- Bubbles -->
<ion-spinner name="bubbles"></ion-spinner>
<!-- Circles -->
<ion-spinner name="circles"></ion-spinner>
<!-- Crescent -->
<ion-spinner name="crescent"></ion-spinner>
<!-- Paused Default Spinner -->
<ion-spinner paused></ion-spinner>
<!-- Default Spinner -->
<ion-spinner></ion-spinner>
<!-- Lines -->
<ion-spinner name="lines"></ion-spinner>
<!-- Lines Small -->
<ion-spinner name="lines-small"></ion-spinner>
<!-- Dots -->
<ion-spinner name="dots"></ion-spinner>
<!-- Bubbles -->
<ion-spinner name="bubbles"></ion-spinner>
<!-- Circles -->
<ion-spinner name="circles"></ion-spinner>
<!-- Crescent -->
<ion-spinner name="crescent"></ion-spinner>
<!-- Paused Default Spinner -->
<ion-spinner paused></ion-spinner>
import React from 'react';
import { IonSpinner, IonContent } from '@ionic/react';
export const SpinnerExample: React.FC = () => (
<IonContent>
{/*-- Default Spinner --*/}
<IonSpinner />
{/*-- Lines --*/}
<IonSpinner name="lines" />
{/*-- Lines Small --*/}
<IonSpinner name="lines-small" />
{/*-- Dots --*/}
<IonSpinner name="dots" />
{/*-- Bubbles --*/}
<IonSpinner name="bubbles" />
{/*-- Circles --*/}
<IonSpinner name="circles" />
{/*-- Crescent --*/}
<IonSpinner name="crescent" />
{/*-- Paused Default Spinner --*/}
<IonSpinner paused />
</IonContent>
);
import { Component, h } from '@stencil/core';
@Component({
tag: 'spinner-example',
styleUrl: 'spinner-example.css'
})
export class SpinnerExample {
render() {
return [
// Default Spinner
<ion-spinner></ion-spinner>,
// Lines
<ion-spinner name="lines"></ion-spinner>,
// Lines Small
<ion-spinner name="lines-small"></ion-spinner>,
// Dots
<ion-spinner name="dots"></ion-spinner>,
// Bubbles
<ion-spinner name="bubbles"></ion-spinner>,
// Circles
<ion-spinner name="circles"></ion-spinner>,
// Crescent
<ion-spinner name="crescent"></ion-spinner>,
// Paused Default Spinner
<ion-spinner paused={true}></ion-spinner>
];
}
}
<template>
<!-- Default Spinner -->
<ion-spinner></ion-spinner>
<!-- Lines -->
<ion-spinner name="lines"></ion-spinner>
<!-- Lines Small -->
<ion-spinner name="lines-small"></ion-spinner>
<!-- Dots -->
<ion-spinner name="dots"></ion-spinner>
<!-- Bubbles -->
<ion-spinner name="bubbles"></ion-spinner>
<!-- Circles -->
<ion-spinner name="circles"></ion-spinner>
<!-- Crescent -->
<ion-spinner name="crescent"></ion-spinner>
<!-- Paused Default Spinner -->
<ion-spinner paused></ion-spinner>
</template>
<script>
import { IonSpinner } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonSpinner }
});
</script>
Properties
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 | 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 |
CSS Custom Properties
Name | Description |
---|---|
--color | Color of the spinner |