fyndiq-component-loader

Preview

A Loader icon for Fyndiq

Installation

The component can be installed through NPM:

npm i -S fyndiq-component-loader

Usage

import React from 'react'
import Loader, { ProgressBar } from 'fyndiq-component-loader'
 
// Basic usage
<Loader />
 
// Change the size
<Loader size={50} />
 
// Change the colors
<Loader color1="black" color2="white" />
 
// Change the wave properties
<Loader waveAmplitude={40} waveLength={50} />
 
// ProgressBar Component
<ProgressBar progress={40} />
 
// Change colors
<ProgressBar color="red" backgroundColor="blue" />
 
// Set an "indeterminated" progressbar
<ProgressBar progress={null} />

API

The component Loader has the following customizable props:

Name	Type	Description	Default value
size	Number	Size of the logo	50
className	String	Class for advanced styling	''
color1	String	First color of the loader	red
color2	String	Second color of the loader	blue
waveLength	Number	Wavelength of the wave	80
waveAmplitude	Number	Amplitude of the wave	25

The component ProgressBar has the following customizable props:

Name	Type	Description	Default value
progress	Number	Progress of the bar, between 0 and 100. If set to null, the bar will be indeterminate	0
className	String	Class for advanced styling	''
progressClassName	String	Advanced styling for the inner progress bar	''
color	String	Color of the inner progress bar	null
backgroundColor	String	Background color	null

Note: By default, the colors of the progressBar are set in CSS to colors.black and colors.border for the background color