ajwann / Svg Loaders React
Licence: other
React adaptation of the SVG Loaders library by Sam Herbert
Stars: ✭ 75
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Svg Loaders React
Vue Content Loading
Vue component to easily build (or use presets) SVG loading cards Facebook like.
Stars: ✭ 729 (+872%)
Mutual labels: svg, loading, loading-animations
Waitme
jquery plugin for easy creating loading css3/images animations
Stars: ✭ 302 (+302.67%)
Mutual labels: loading, loading-animations
Android Loading Dialog
这个是我在泡网看见的一个等待的dialog
Stars: ✭ 297 (+296%)
Mutual labels: loading, loading-animations
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+932%)
Mutual labels: loading, loading-animations
Xamarin.Android.AVLoadingIndicatorView
🔰 AVLoadingIndicatorView is a collection of nice loading animations for Xamarin.Android.
Stars: ✭ 26 (-65.33%)
Mutual labels: loading, loading-animations
Rsloadingview
Awesome loading animations using 3D engine written with Swift
Stars: ✭ 388 (+417.33%)
Mutual labels: loading, loading-animations
react-bones
💀 Dead simple content loading components for React and React-Native. 💀
Stars: ✭ 42 (-44%)
Mutual labels: loading, loading-animations
Create Content Loader
✏️ Tool to create your own react-content-loader easily.
Stars: ✭ 937 (+1149.33%)
Mutual labels: svg, loading
React Planner
✏️ A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.
Stars: ✭ 846 (+1028%)
Mutual labels: svg, react-component
Spinners
A Sass mixin to generate fully customizable, pure CSS3 loading/busy indicators
Stars: ✭ 33 (-56%)
Mutual labels: loading, loading-animations
Fluent-Design
Microsoft's Fluent Design with pure HTML/CSS/JS
Stars: ✭ 36 (-52%)
Mutual labels: loading, loading-animations
Ngx Skeleton Loader
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
Stars: ✭ 278 (+270.67%)
Mutual labels: loading, loading-animations
SSSwiftUISpinnerButton
SSSwiftUISpinnerButton is a collection of various spinning animations for buttons in SwiftUI.
Stars: ✭ 37 (-50.67%)
Mutual labels: loading, loading-animations
React No Content
A SVG react component to display when there's no content.
Stars: ✭ 59 (-21.33%)
Mutual labels: svg, react-component
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (+238.67%)
Mutual labels: svg, loading
respinner
Pretty and customizable svg spinners for React.js
Stars: ✭ 89 (+18.67%)
Mutual labels: loading, loading-animations
React Circle
Renders a svg circle + progress, it just works 💘
Stars: ✭ 925 (+1133.33%)
Mutual labels: svg, loading
Jhud
A full screen of the HUD when loading the data (Objective-C).
Stars: ✭ 1,003 (+1237.33%)
Mutual labels: loading, loading-animations
This is a zero-dependency React adaptation of Sam Herberts SVG Loaders library.
Usage
Install from NPM
npm install svg-loaders-react
Import the SVGLoaders components
Import all the loaders in a namespaced fashion
You can import all the loaders at once:
import * as SVGLoaders from 'svg-loaders-react';
and use them in a namespaced manner:
<SVGLoaders.Bars />
Import an individual loader
You can also import a single loader:
import { Bars } from 'svg-loaders-react'
and use it without any fancy namespacing:
<Bars />
Components
<Audio />
<BallTriangle />
<Bars />
<Circles />
<Grid />
<Hearts />
<Oval />
<Puff />
<Rings />
<SpinningCircles />
<TailSpin />
<ThreeDots />
Options
Each of these components should be able to accept any SVG tag presentation attributes as props.
Common Usage
// render the Puff loader with a stroke opacity of .125
<Puff strokeOpacity=".125" />
// render the Puff loader with a stroke of mint green
<Puff stroke="#98ff98" />
// render the Puff loader with a stroke of mint green and a stroke opactiy of .125
<Puff stroke="#98ff98" strokeOpacity=".125"/>
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].