Socket
Socket
Sign inDemoInstall

react-loading-spin

Package Overview
Dependencies
6
Maintainers
1
Versions
53
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-loading-spin

A simple animated spinner react component.


Version published
Maintainers
1
Install size
3.28 MB
Created

Readme

Source

react-loading-spin CI npm version npm PRs Welcome License: MIT

A simple reusable animated spinner react component.

Preview

Alt Text

Install

npm i --save react-loading-spin

Import

import LoadingSpin from "react-loading-spin";

Use

const ExampleOfUsingDefaultLoadingSpin = () => (
    <div className={"ExampleOfUsage"}>
        <LoadingSpin />
    </div>
);

Alt Text

Manage Properties

Property nametypeRequiredDefault valueComment
sizestringfalse'60px'CSS length value for height and width of the spinner
widthstringfalse'6px'CSS length value for width the spinner
primaryColorstringfalse'#1ecd96'CSS color value for one half of the loader
secondaryColorstringfalse'#cccccc'CSS color value for second half of the loader
animationDurationstringfalse'2s'CSS animation-durationproperty value
animationTimingFunctionstringfalse'ease-in-out'CSS animation-timing-function property value
animationDirectionstringfalse'normal'CSS animation-direction property value
numberOfRotationsInAnimationnumberfalse2number of spins during single animation
const ExampleOfUsingLoadingSpinWithProps = () => (
    <div className={"ExampleOfUsage"}>
        <LoadingSpin
            duration="2s"
            width="15px"
            timingFunction="ease-in-out"
            direction="alternate"
            size="200px"
            primaryColor="yellow"
            secondaryColor="#333"
            numberOfRotationsInAnimation={2}
        />
    </div>
);

Alt Text

Built With

License

MIT - see the LICENSE file for details.

Keywords

FAQs

Last updated on 21 Nov 2021

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc