GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → jottenlips → react-bones

jottenlips / react-bones

Licence: MIT license
💀 Dead simple content loading components for React and React-Native. 💀

Programming Languages

javascript
184084 projects - #8 most used programming language
java
68154 projects - #9 most used programming language
objective c
16641 projects - #2 most used programming language
typescript
32286 projects
HTML
75241 projects
CSS
56736 projects

Labels

reactcsscontentavatarreact-nativeskeletoncross-platformanimationtextlernaloadingstorybookanimationspreviewloading-animationsreact-native-webcontent-loaderreact-springcontent-loadingskeleton-ui

Projects that are alternatives of or similar to react-bones

Vue Content Loading
Vue component to easily build (or use presets) SVG loading cards Facebook like.
Stars: ✭ 729 (+1635.71%)
Mutual labels:  skeleton, loading, loading-animations
Skeletonview
☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting
Stars: ✭ 10,804 (+25623.81%)
Mutual labels:  skeleton, loading, loading-animations
Ngx Skeleton Loader
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
Stars: ✭ 278 (+561.9%)
Mutual labels:  skeleton, loading, loading-animations
SSSwiftUISpinnerButton
SSSwiftUISpinnerButton is a collection of various spinning animations for buttons in SwiftUI.
Stars: ✭ 37 (-11.9%)
Mutual labels:  loading, animations, loading-animations
Tabanimated
A skeleton screen framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架，包含快速植入，低耦合，兼容复杂视图等特点，提供国内主流骨架屏动画的加载方案，同时支持上拉加载更多、自定制动画。)
Stars: ✭ 2,909 (+6826.19%)
Mutual labels:  skeleton, loading, loading-animations
Xamarin.Android.AVLoadingIndicatorView
🔰 AVLoadingIndicatorView is a collection of nice loading animations for Xamarin.Android.
Stars: ✭ 26 (-38.1%)
Mutual labels:  loading, animations, loading-animations
koleton
The easiest library to show skeleton screens in an Android app.
Stars: ✭ 84 (+100%)
Mutual labels:  skeleton, loading
Skeletonui
☠️ Elegant skeleton loading animation in SwiftUI and Combine
Stars: ✭ 275 (+554.76%)
Mutual labels:  skeleton, loading
React Skeletor
Skeleton loading for React
Stars: ✭ 551 (+1211.9%)
Mutual labels:  skeleton, loading
awesome-web-styling
Awesome Web Styling with CSS Animation Effects ⭐️
Stars: ✭ 109 (+159.52%)
Mutual labels:  text, loading
Skeleton
💀 An easy way to create sliding CAGradientLayer animations! Works great for creating skeleton screens for loading content.
Stars: ✭ 587 (+1297.62%)
Mutual labels:  skeleton, loading-animations
Windless
Windless makes it easy to implement invisible layout loading view.
Stars: ✭ 919 (+2088.1%)
Mutual labels:  skeleton, loading
Skeleton-Bones
Library for dynamically generating skeleton loader drawables for Layouts and Views
Stars: ✭ 78 (+85.71%)
Mutual labels:  skeleton, content-loading
Typewriterview
Android library for typewriter like effects
Stars: ✭ 124 (+195.24%)
Mutual labels:  text, animations
React Native Hyperlink
A <Hyperlink /> component for react-native that makes urls, fuzzy links, emails etc clickable
Stars: ✭ 572 (+1261.9%)
Mutual labels:  text, react-native-web
Skeletonloadingview
SkeletonLoadingView(Shimmer) with Kotlin in Android💀💀
Stars: ✭ 146 (+247.62%)
Mutual labels:  skeleton, loading
Ocskeleton
[OCSkeleton] - Make your loading view a little difference.
Stars: ✭ 184 (+338.1%)
Mutual labels:  skeleton, loading-animations
pattern-library
AXA CH UI component library. Please share, comment, create issues and work with us!
Stars: ✭ 103 (+145.24%)
Mutual labels:  lerna, storybook
React Native Web Workspace
cross platform app with react in a monorepo
Stars: ✭ 74 (+76.19%)
Mutual labels:  lerna, react-native-web
Lerna Yarn Workspaces Monorepo
🐉 A Monorepo with multiple packages and a shared build, test, and release process.
Stars: ✭ 201 (+378.57%)
Mutual labels:  lerna, storybook
View All Similar Projects ➔

react-bones

Dead simple loading components for React and React-Native.

NPM GitHub

💀 npm i react-bones

React

import { Bones } from "react-bones/lib";

React-Native

import { Bones } from "react-bones/native";


const Post = (props) =>
  props.loading ? (
    <View>
      <Bones />
      <View style={{ padding: 10 }} />
      <Bones width={600} height={20} />
      <View style={{ padding: 10 }} />
      <Bones width={600} height={20} />
      <View style={{ padding: 10 }} />
      <Bones width={600} height={20} />
      <View style={{ padding: 10 }} />
    </View>
  ) : (
    <View>
      <Image style={{ width: 50, height: 50 }} source={{ uri: props.image }} />
      <Text>{props.text}</Text>
    </View>
  );

Storybook Demo

Homepage

Demo

Example

Clone the repo and run yarn run web for a CRA example.

A fully linked React-Native example is coming soon.

For now, cd packages/bones_react_native_app

yarn
yarn run ios

Thanks

Shoutout to everyone that works on react-native-web It is a great library!

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].