INTRODUCTION

This is a reusable React component that will manage all of your preloading effects with little or no hassle. Just install the package, add the props as your requirement and you are good to go.

INSTALLATION

npm i sinteki-react-preloader

USAGE

import React from "react";
import Skeleton from "sinteki-react-preloader-component";

const App = () => {
  return (
    <Skeleton 
    width={100} 
    height={100} 
    text={"sinteki"} 
    color={"#e8e8e8"} 
    fontSize={50} 
    borderRadius={20} 
    background={ "linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%)"}/>
  )
}

export default App

Build

npm run build

props

width - type : Number - % of it's container

height - type : Number - % of it's container

borderRadius - type : Number - % of it's container. For circle, width and height should be equal while border radius should be half the width or height.

background - type : gradient - for effect use linear gradient

title - whatever text you would like to display as a placeholder.

fontSize - type: Number

color: color of placeholder text (hex, rgba, plain color)

Author

Emmanuel Ekpo @Sinteki Technologies Limited