Controls

Spinner

Storybook

The Spinner component allows you to display the progress of a task or process in real time. It is visually appealing and provides instant feedback to the user on the progress of the task, which improves the user experience on web or mobile applications. Plus, it's easy to use and customize.

Imports

The first alternative is recommended since they can reduce the application bundle

1import Spinner from 'dd360-ds/Spinner'

1import { Spinner } from 'dd360-ds'

Usage

Use the Spinner component as shown below:

The code snippet below shows how to use the Spinner component:

1import  Progressbar from 'dd360-ds/Progressbar'
2
3<Spinner />
4

Color

With the prop color you can customize the color of the spinner

1import  Progressbar from 'dd360-ds/Progressbar'
2
3<Spinner color="#44ce41" />
4

Border

With the prop border you can customize the width of the spinner border

1import  Progressbar from 'dd360-ds/Progressbar'
2
3<Spinner border={8} />
4

PageLoader

With the prop pageLoader you can add a proper spineer for page load

1import  Progressbar from 'dd360-ds/Progressbar'
2
3<Spinner pageLoader />
4

Width and Height

With the props width and height you can customize the size of the spinner

1import  Progressbar from 'dd360-ds/Progressbar'
2
3<Spinner width="6rem" border={8} height="6rem" />
4

API Reference