Version: 3.0.0

Spinner

โ€‹

Description

The Spinner component shows the loading state using specific visual effects. There are two types of loading spinners (sprite-animation, particle-package) with different effects.

Example

import React from "react";
import {
View,
Spinner,
Text,
LinearLayout,
Prism,
Scene
} from "magic-script-components";
export default class MyApp extends React.Component {
render() {
return (
<Scene>
<Prism size={[1, 1, 0.2]} >
<View name="main-view" alignment={'center-center'}>
<LinearLayout alignment='center-center' defaultItemAlignment='center-center' defaultItemPadding={[0.05, 0, 0, 0]}>
<Spinner type="sprite-animation" height={0.25} determinate={false} />
<Text textSize={0.04} >Your content is loading...</Text>
</LinearLayout>
</View>
</Prism>
</Scene>
);
}
}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueRequiredDescriptionLuminAndroidIOS
typestringn/aThe loading spinner type (sprite-animation or particle-package).๐Ÿ‘
resourceIdnumber0NThe resource ID.๐Ÿ‘
resourcePathstring''NThe resource path in the resource (optional).๐Ÿ‘
heightnumber0NThe height of the loading spinner (optional).๐Ÿ‘
determinatebooleanfalseNIf true, this creates a determinate loading spinner component using default settings.๐Ÿ‘๐Ÿ‘๐Ÿ‘

Element Properties

NameTypeDefault ValueDescriptionLuminAndroidIOS
valuenumber0Sets a normalized value between 0-1 for loading completeness, with 0 being no progress and 1 fully complete. This is used only when the loading spinner is determinate.๐Ÿ‘
sizevec2Sets the loading spinner size. This affects the visual scale of all sprite-based loading spinners but has no affect on the visual scale of a particle-based spinner. Modify the particle files directly to adjust the particle effect size. This does affect, and should be used to adjust, the bounds of all loading spinners.๐Ÿ‘

type options: LoadingSpinnerType