Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-animate-loader
Advanced tools
Readme
A animated sleek loader for react components
A animated sleek loader for any HTML element / React component.
yarn add react-animate-loader
# or
npm i react-animate-loader
import React from 'react';
import ReactAnimateLoader from 'react-animate-loader';
function App() {
return (
<ReactAnimateLoader>
<div></div>
</ReactAnimateLoader>
);
}
ReactAnimateLoader
is applied as a wrapper to any HTML / React element. It could a single element or a set of elements.ReactAnimateLoader
will loop through each if its children and check whether it's empty.:after
pseudo element.:after
pseudo element has a white gradient background. The element moves from left to right of the parent element for a default time period of 1.2 seconds. The movement is repeated for an infinitely, generating a nice loading experience.ReactAnimateLoader
wrapper to the HTML / React element.style
props of ReactAnimateLoader
element..react___block__loader:empty:after
.:after
pseudo approach?The alternate to adding a pseudo element is to step into the internals of the HTML / React element and add a child which does the animation. This would mean that the library is manipulating the DOM of the element without knowing anything about the element. This might cause unintended consequences to the element resulting in override of the element behaviour.
To avoid such issues, the library uses CSS only approach to append a pseudo element and run the animation in the pseudo element. This way, the library is unaware of the internals of the HTML / React element and prove to be a generic module.
ReactAnimateLoader applies loading animation to each of its immediate children. In case the immediate children has it's own children or text content, ReactAnimateLoader does not get applied. The element should be empty for ReactAnimateLoader to kick-in.
Prop | Type | Required | Default | Description |
---|---|---|---|---|
style | React.CSSProperties | Optional | {minHeight:1.5rem,backgroundColor:#e2e2e2} | Custom CSS styling for children of ReactAnimateLoader component. |
npm install
npm run build # or use npm run build:watch
npm run start:examples
npm install
npm run build:watch
npm run start:examples
MIT
FAQs
An animated sleek loader for react components
The npm package react-animate-loader receives a total of 0 weekly downloads. As such, react-animate-loader popularity was classified as not popular.
We found that react-animate-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.