Reloa is a set of loading animations for websites using React, providing a quick and elegant solution for times when a user interaction takes a while to complete.
If you are using npm versions 3, 4, 5 or 6, you must explicitly install the dependencies below.
If you are using any version of
npmnot listed here, it will automatically install the dependencies. You can still do this manually if you are going to use any of them in your own project.
npm install styled-componentsnpm install reloaA possible use of these animations is to show them according to some type of interaction with the user that can lead to some delay in getting a response, such as in a form submission.
import React, { useState } from "react";
import { SpinningCircles } from "reloa";
const Example = () => {
const [isSending, setIsSending] = useState(false);
const handleSubmit = function (event) {
event.preventDefault();
setIsSending((isSending) => !isSending);
};
return (
<form onSubmit={handleSubmit}>
<button>
{isSending ? <SpinningCircles size="1em" /> : "Submit form"}
</button>
</form>
);
};
export { Example };If you need to show something while an entire page loads behind the scenes, the lib provides a ready-to-use overlay.
import React, { useState } from "react";
import { Overlay, RollingBlocks } from "reloa";
const Example = () => {
const [isLoading, setIsLoading] = useState(true);
return (
<Overlay show={isLoading}>
<RollingBlocks />
</Overlay>
);
};
export { Example };You don't necessarily need to just put animations on the overlay, and besides, you can change some of their behavior and styling through the properties.
Any other property not listed below will be passed to the
<div>element that represents the overlay.This makes it possible to use properties that this element would commonly have in the React world, such as
styleandclassName, making everything more flexible and easier to adjust to your taste or needs.
| Required? | Type | Default value |
|---|---|---|
| Yes | Boolean |
true |
Description:
It is expected that in the component you use the overlay on, a state will be created to control when it should appear or disappear.
It is expected that in the component you use the overlay on, a state will be created to control when it should appear or disappear. Thus, passing the variable that stores this state to the overlay through this property.
You can also, of course, do something like {isLoading ? <Overlay>{/*...*/}</Overlay> : null}, creating your own component visibility control.
However, this would also give you the extra work of, if you like, creating smooth transitions when the overlay enters or leaves the scene, which can be easily configured using this property in conjunction with the one described below :).
| Required? | Type | Default value |
|---|---|---|
| No | String |
null |
Description:
Enables smooth transitions when the overlay enters and/or leaves the screen.
| Possible values | What they do? |
|---|---|
“fadeIn” |
Applies a transition that makes it smoother when the component comes on screen. |
“fadeOut” |
Applies a transition that makes it smoother when the component leaves the screen. |
“fadeInOut” |
Applies a transition that makes it smoother when the component enters and leaves the screen. |
| Required? | Type | Default value |
|---|---|---|
| No | Boolean |
true |
Description:
Through this property you can decide whether or not you want to hide the scrollbar when the overlay is active.
If you need to instantiate more than one animation and they have custom values for certain properties (see section below), you can use the context provided by the lib to set all these properties if you like.
Attention: The properties passed directly to the animations will have priority over the ones defined in the context.
import React from "react";
import { ReloaContext, RollingBlocks, SpinningCircles } from "reloa";
// No context
const Example1 = () => {
return (
<div>
<RollingBlocks size="1em" colorScale="rgba(255, 120, 200, 0.8)" />
<SpinningCircles size="1em" colorScale="rgba(255, 120, 200, 0.8)" />
</div>
);
};
// With context
const Example2 = () => {
return (
<div>
<ReloaContext.Provider value={{ size: "1em", colorScale="rgba(255, 120, 200, 0.8)" }}>
<RollingBlocks />
<SpinningCircles />
</ReloaContext.Provider>
</div>
);
};
export { Example1, Example2 };The animation components can be given some properties to adjust them to your needs.
| Required? | Type | Default value |
|---|---|---|
| No | String or String[] |
null |
Description:
Through this property it is possible to change the colors of the elements present in the animations. If this is not set, the default base color for animations will be "#d2d2d8".
If you intend to make things even more festive and/or colorful, instead of passing a single color, you can still pass an array of colors.
| Required? | Type | Default value |
|---|---|---|
| No | String |
null |
Description:
This property simply changes the width and height of the animation container to the value passed to it. The default value for these properties is "4em".
The measurements used to create the animations are in %, which means that when you change the width and height of the animation container, the size of the animation changes proportionally.
Attention: You must pass the unit of measure along with the value, as in a normal height and width setting.
| Required? | Type | Default value |
|---|---|---|
| No | Number |
5 |
Description:
This property allows you to change the animation speed completely, receiving as value the number of seconds of its duration.
If no value is passed, calculations will be done so that the animation lasts 5 seconds.
It is nothing more than a collection of components whose only dependency is styled-components (just so you don't need to import a separate CSS file) and all animations are created only with CSS and JS.
This project is under the MIT license. See the LICENSE for more information.
Made with 💜 by Lucas Coutinho 👋 Get in touch!