All Projects โ†’ SaraVieira โ†’ Styled Loaders

SaraVieira / Styled Loaders

Licence: other
Loaders Built with Preact and Styled Components

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Styled Loaders

mediocre-pictures
Helping you take mediocre pictures, hands-free. ๐Ÿ“ท๐Ÿ™†๐Ÿป๐Ÿ™…๐Ÿพ๐Ÿ’๐Ÿผ๐Ÿ“ธ
Stars: โœญ 16 (-92.45%)
Mutual labels:  preact, styled-components
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. ๐Ÿ’…
Stars: โœญ 428 (+101.89%)
Mutual labels:  styled-components, preact
YASCC
Yet Another SoundCloud Client
Stars: โœญ 30 (-85.85%)
Mutual labels:  preact, styled-components
Design System Utils
๐Ÿ‘ฉโ€๐ŸŽจ Access your design tokens with ease
Stars: โœญ 465 (+119.34%)
Mutual labels:  styled-components, preact
React Ssr Starter
All have been introduced React environment
Stars: โœญ 20 (-90.57%)
Mutual labels:  styled-components, preact
Goober
๐Ÿฅœ goober, a less than 1KB ๐ŸŽ‰ css-in-js alternative with a familiar API
Stars: โœญ 2,317 (+992.92%)
Mutual labels:  styled-components, preact
desvg
๐ŸŒ… Converts SVG files into components ๐ŸŒž
Stars: โœญ 79 (-62.74%)
Mutual labels:  preact, styled-components
Styled Components Website
The styled-components website and documentation
Stars: โœญ 513 (+141.98%)
Mutual labels:  styled-components, preact
Nyancss
๐ŸŒˆ Write plain CSS while reaping benefits of CSS-in-JS
Stars: โœญ 544 (+156.6%)
Mutual labels:  styled-components, preact
Scoped Style
A tiny css in js library ๐Ÿš€
Stars: โœญ 129 (-39.15%)
Mutual labels:  styled-components, preact
Filbert Js
A lightweight(~1kb) css-in-js framework
Stars: โœญ 167 (-21.23%)
Mutual labels:  styled-components, preact
Lerna Yarn Workspaces Monorepo
๐Ÿ‰ A Monorepo with multiple packages and a shared build, test, and release process.
Stars: โœญ 201 (-5.19%)
Mutual labels:  styled-components
Frontend
Save and share your best solutions
Stars: โœญ 191 (-9.91%)
Mutual labels:  styled-components
Bolt
The Bolt Design System provides robust Twig and Web Component-powered UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.
Stars: โœญ 186 (-12.26%)
Mutual labels:  preact
Zero To Preact
A Step-by-step Guide to Preact + Webpack 2, without boilerplate!
Stars: โœญ 185 (-12.74%)
Mutual labels:  preact
Preact Devtools
Browser extension for inspection Preact applications
Stars: โœญ 204 (-3.77%)
Mutual labels:  preact
Preact Redux Example
๐Ÿ” Preact + Redux Example Project
Stars: โœญ 199 (-6.13%)
Mutual labels:  preact
Smakosh.com
My personal website
Stars: โœญ 185 (-12.74%)
Mutual labels:  styled-components
Styled Theme
Extensible theming system for styled-components ๐Ÿ’…
Stars: โœญ 183 (-13.68%)
Mutual labels:  styled-components
Vaporboy
Gameboy / Gameboy Color Emulator PWA built with Preact. โš›๏ธ Powered by wasmBoy. ๐ŸŽฎThemed with VaporWave. ๐ŸŒด๐Ÿฌ
Stars: โœญ 182 (-14.15%)
Mutual labels:  preact

Styled Loaders

Build Status styled with prettier npm version

Demo

NPM

Loaders Built with Preact and Styled Components ready for your next project because no one deserves to have to writes loadings all the time.

If you are looking for a React version you can find one here by the awesome Sai Sandeep Vaddi

Credits and inspiration also belong heavily to the awesome work at SpinKit

As I work on more projects over time more, more loaders will be added here.

Usage

npm i styled-loaders
or
yarn add styled-loaders
import { h } from 'preact'
import { Cube } from 'styled-loaders'

const Page = ({ loading }) =>
    <main>
        { loading ?
            <Cube/>
            : 'Your Content'
        }
    </main>

With Props

import { h } from 'preact'
import { Block } from 'styled-loaders'

const Page = ({ loading }) =>
    <main>
        { loading ?
            <Block color="red" size="60px" duration="5s" />
            : 'Your Content'
        }
    </main>

Loaders

  • Block Block

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
  • Circular Circular

    • Props
      • color - Background of the spinner default is #333
      • size - Size of the spinner default is 40px
  • Cube Cube

    • Props
      • color - Background of the spinner default is #333
      • size - Size of the spinner default is 40px
      • cubeSize - Size of the each cube default is 15
      • duration - Animation duration default is 1.2s
  • CubeGrid CubeGrid

    • Props
      • color - Background of the spinner default is #333
      • size - Size of the spinner default is 40px
  • DotScale DotScale

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
      • dotSize - Size of the dots default is 18px
  • Pulsate Pulsate

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
  • RotateScale RotateScale

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
  • Scale Scale

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
  • Stretch Stretch

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
      • rectWidth - Width of each rectangle default is 6px

License

MIT (2017 - Sara Vieira)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].