This loader is purpose-built to seamlessly integrate with the Suspense
React component. It serves as a visual aid, enhancing the user experience by providing loading feedback during asynchronous operations. The React Suspense Loader Component is designed to work effortlessly within React applications, ensuring a smooth and user-friendly interface while content is being fetched or loaded.
npm i darco-loader
import Loader from 'darco-loader'
const newStyles = {
container: {
width: '50%',
height: '50vh',
}
}
// change the with and height of the loader main container.
<Loader styles={newStyles}/>
- default "static"
- static: must be called once with a time, number parameter.
- interval: must be called in loop.
- must be an integer in seconds
- default: 2
- show the progress porcentage.
- default: true
The loaderStyleProps
type is an interface that defines various styling options for a loader component. It is used to configure the appearance of different parts of the
loader.
-
Type: Object
-
Description: Styling options for the main outer container of the loader.
-
width
(optional): Width of the container.(default: 100%) -
height
(optional): Height of the container.(default: 100vh) -
backgroundColor
(optional): Background color of the container.
-
-
Type: Object
-
Description: Styling options for the container that holds the progress bar.
-
width
(optional): Width of the container.(default: 80%) -
height
(optional): Height of the container.(default: auto) -
backgroundColor
(optional): Background color of the container. -
display
(optional): Display mode of the container. Values can be'block'
or'none'
. -
borderRadius
(optional): Border radius of the container.
-
-
Type: Object
-
Description: Styling options for the progress bar itself.
-
height
(optional): Height of the progress bar. -
backgroundColor
(optional): Background color of the progress bar.
-
-
Type: Object
-
Description: Styling options for the progress pointer (indicator).
-
width
(optional): Width of the progress pointer. -
height
(optional): Height of the progress pointer. -
backgroundColor
(optional): Background color of the progress pointer. -
shadowColor
(optional): Shadow color of the progress pointer.
-
-
Type: Object
-
Description: Styling options for the final screen of the loader.
-
backgroundColor
(optional): Background color of the final screen. -
time
(optional): Time delay (in milliseconds) before transitioning to the final screen.
-
The Styles type provides a flexible way to customize the appearance of a loader component by specifying different styling options for its various parts. You can use it to control the dimensions, colors, and other visual properties of the loader elements to match your application's design.