Giter Site home page Giter Site logo

blackrabbit944 / uiball-loaders Goto Github PK

View Code? Open in Web Editor NEW

This project forked from griffinjohnston/ldrs

0.0 0.0 0.0 425 KB

Modern, tree-shakeable loaders & spinners for React. Made with CSS, HTML and a splash of SVG.

License: MIT License

JavaScript 43.48% SCSS 56.52%

uiball-loaders's Introduction

U-I Ball Loaders

Loaders

Lightweight loaders & spinners for your next React project.

  • 24 Types ๐ŸŽจ โ€” Unique enough to be interesting; simple enough to use in real-world projects
  • Customizable ๐Ÿ–Œ๏ธ โ€” Set the size, color, line weight and animation speed to match your design
  • Tiny ๐Ÿฆ โ€” Individual loaders are < 1kb gzipped
  • No gifs ๐Ÿ“ท โ€” Built with HTML and modern CSS. A couple loaders use lightweight SVG as well
  • Zero dependencies โ›“๏ธ โ€” Zero worries.

Visit the ๐ŸŒ Website to see them all in action.

Built by Griffin Johnston for UI Ball

Installation

NPM

npm install @uiball/loaders

Yarn

yarn add @uiball/loaders

Getting Started

Import individual loader components. Use them wherever you like. The full list can be found on the website.

import { Waveform } from '@uiball/loaders'

export default function PageSection({ isLoading }) {
  return (
    <div aria-live="polite" aria-busy={isLoading}>
      {isLoading && <Waveform />}
    </div>
  )
}

Tree Shaking

This package is designed to maximize the benefits of tree shaking; so when you use a modern bundler like Webpack, Rollup or Parcel, and import { Orbit } from '@uiball/loaders' only the tiny code for the Orbit loader ends up in your app (most are less than 1kb).

Platform Support

This is a pure ESM library, so no require()-ing from CommonJS.

Next.js doesn't transpile ESM modules by default and will throw an error, but you can add support with this package: https://www.npmjs.com/package/next-transpile-modules.

Loaders make use of CSS custom properties (CSS variables) and keyframe animations, which work great in all modern browsers. Internet Explorer is not supported, however.

Options

Each loader has different defaults. You can see them on the website. Click on an individual loader and open the "source" sidebar. Default values will be listed at the top, followed by HTML and CSS if you want to copy/paste rather than use the React components.

size: number

The size of the loader. Specifically, this defines the largest dimension (height or width) in pixels.

<Ring size={35} />

color: string

Any valid CSS color value is accepted, so #000000, red, hsl(13, 68%, 63%) and var(--my-custom-color) are all a-okay.

<Ring color="papayawhip" />

speed: number

The speed of the animation. Each loader uses this number a little differently (individual parts of a given loader might have different timing), but in general this number represents the duration of a single full animation loop in seconds, so smaller = faster.

<Ring speed="1.75" />

lineWeight: number

The width / stroke in pixels of line-based loaders like <Waveform /> or <RaceBy />. You can see if an individual loader supports this property on the website.

<MrMiyagi lineWeight="3.5" />

License

MIT

uiball-loaders's People

Contributors

griffinjohnston avatar ugursepetci avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.