Loading spinner that covers all or some of the screen with animation.
When it is shown, if covers with a gray transparent layer the area blocking the user to interact with the covered container.
Fully customizable and simple.
Written in Typescript but runs everywhere.
npm start
Only the show is required!
interface IDynaIsLoadingProps {
className?: string; // for custom styles
show: boolean; // (required) show it or not
fullScreen?: boolean; // will cover the while screen
spinner?: JSX.Element; // react component will be shown as spinner
message?: JSX.Element | string; // message will be shown under the spinner
onClick?: () => void; // click event
}
The visibility is controlled from the show prop.
Render always the dyna-ui-is-loading to get the animations effect. Handle the visibility from the show prop only.
Render it in any container.
In this container you should apply the style position: relative.
This because the the dyna-ui-is-loading component will apply to itself position: absolute to cover the whole area of the parent container.
Render it in any container, fullScreen: true.
The dyna-ui-is-loading will be rendered in a dynamic container that will be created as last child in the body. This is supported from the dyna-ui-modal-container, for more about this read there but you don't need anything more really.
Do it with the classic way
- apply a class name
- style this class overriding few styles
The spinner property expects a react component. You can create your own super dooper spinner and pass it to dyna-ui-is-loading, since the dyna-ui-is-loading is actually a nice container to is loading spinners that cover some or all screen with animation.
Note: this is only for the default spinner.
You can apply your own spinner to spinner prop where is a react component, but if you want to use the default one you have to add this dependency.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">