Download
Tool to easily create your animated skeleton-screen components, replacing usual loading and delivering better experiences for users, giving a wireframe of your pages like placeholders boxes for content and images. Supports React, React Native, Vue, and vanilla HTML. Using react-content-loader or a skeleton screen, you can show users that it’s almost done and something is happening. You can use any SVG shapes to create the loader elements. It’s easy to create an animated placeholder, which shines from left to right. It has a few pre-styled content loaders (e.g, Facebook, Instagram). Since SVG supports a lot of shapes, it can be used for any complex UI. You can simply design your loader based on the page and edit the size, background, and foreground. Also, you can add the radius to the border, add or remove shapes such as rectangle and circle, and select the speed of the animations.
Features
- SVG-Powered component to easily create placeholder loadings
- Customizable, feel free to change the colors, speed, sizes, and even RTL
- Plug and play, with many presets to use
- DIY, use the create-content-loader to create your own custom loaders easily
- React Native support, same API, as same powerful features
- Really lightweight, less than 2kB and 0 dependencies for web version
Project Samples
