spinner.md

Spinner

AdaptUI provides a Spinner Component which gives visual cues to actions that are processing or awaiting a course change or results.

Simulator.Screen.Recording.-.iPhone.14.-.2022-12-14.at.16.48.02.mp4

Simple Usage

import { Box, Spinner, useTheme } from "@adaptui/react-native-tailwind";

export default function App() {
  const theme = useTheme();
  return (
      <Box style={tailwind.style("mx-5 my-5")}>
        <Spinner />
      </Box>
  )
}

Table of Contents

• Themes
• Size
• Track
• Props

Themes

Adapt UI provides three themes for spinner: base, primary, secondary, success and danger.

You can use these themed spinner components based for your specific scenarios.

Simulator.Screen.Recording.-.iPhone.14.-.2022-12-14.at.16.50.03.mp4

Usage

import { Box, Spinner, useTheme } from "@adaptui/react-native-tailwind";

export default function App() {
  const theme = useTheme();
  return (
    <>
      <Spinner
        style={tailwind.style("my-2")}
      />
      <Spinner
        style={tailwind.style("my-2")}
        themeColor="primary"
      />
      <Spinner
        style={tailwind.style("my-2")}
        themeColor="secondary"
      />
      <Spinner
        style={tailwind.style("my-2")}
        themeColor="success"
      />
      <Spinner
        style={tailwind.style("my-2")}
        themeColor="danger"
      />
    </>
  )
}

Size

There are five different sizes for the Spinner component in Adapt UI: xs, sm, md, lg & xl

Based on the hierarchy, you can switch between different sizes.

Simulator.Screen.Recording.-.iPhone.14.-.2022-12-14.at.16.50.51.mp4

Usage

import { Box, Spinner, useTheme } from "@adaptui/react-native-tailwind";

export default function App() {
  const theme = useTheme();
  return (
    <>
      <Spinner
        style={tailwind.style("my-2")}
        size="xs"
      />
      <Spinner
        style={tailwind.style("my-2")}
        size="sm"
      />
      <Spinner
        style={tailwind.style("my-2")}
      />
      <Spinner
        style={tailwind.style("my-2")}
        size="lg"
      />
      <Spinner
        style={tailwind.style("my-2")}
        size="xl"
      />
    </>
  )
}

Track

We have two different-looking spinners which have visible or transparent track of the spinner.

Simulator.Screen.Recording.-.iPhone.14.-.2022-12-14.at.16.52.59.mp4

Usage

import { Box, Spinner, useTheme } from "@adaptui/react-native-tailwind";

export default function App() {
  const theme = useTheme();
  return (
    <>
      <Spinner
        style={tailwind.style("my-2")}
        themeColor={value}
        key={index}
        track="visible"
      />
    </>
  )
}

Props

Name	Description	Type	Default
size	How large should the spinner be?	xs sm md lg xl	md
track	Should spinner track be displayed?	visible transparent	transparent
themeColor	Spinner Theme	base primary secondary success danger	base