jh3y / Whirl
Licence: mit
CSS loading animations with minimal effort!
Stars: ✭ 774
Labels
Projects that are alternatives of or similar to Whirl
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: ✭ 111 (-85.66%)
Mutual labels: progress, spinner, loading, spinners, loading-bar, loading-spinner
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (-67.18%)
Mutual labels: loader, loading, progress, spinner, spinners, loading-spinner
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-97.29%)
Mutual labels: progress, loader, spinner, loading, spinners
Iprogresshud
An elegant, lightweight and responsive progress HUD for iOS app with very simple usage. Available 32 indicators by NVActivityIndicatorView.
Stars: ✭ 66 (-91.47%)
Mutual labels: loading, progress, loading-animations, loading-spinner, loading-bar
SSSwiftUISpinnerButton
SSSwiftUISpinnerButton is a collection of various spinning animations for buttons in SwiftUI.
Stars: ✭ 37 (-95.22%)
Mutual labels: loader, loading, loading-animations, loading-spinner
Aframe Preloader Component
A preloading bar that automatically displays while scene assets load.
Stars: ✭ 27 (-96.51%)
Mutual labels: loader, spinner, spinners, loading-bar
Waitme
jquery plugin for easy creating loading css3/images animations
Stars: ✭ 302 (-60.98%)
Mutual labels: loader, loading, progress, loading-animations
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-83.59%)
Mutual labels: loader, loading, progress, spinner
busy-load
A flexible loading-mask jQuery-plugin
Stars: ✭ 76 (-90.18%)
Mutual labels: loader, spinner, loading, loading-spinner
react-awesome-loaders
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
Stars: ✭ 146 (-81.14%)
Mutual labels: progress, loader, spinner, spinners
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+141.47%)
Mutual labels: loader, loading, progress, spinner
Ngx Skeleton Loader
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
Stars: ✭ 278 (-64.08%)
Mutual labels: hacktoberfest, loader, loading, loading-animations
respinner
Pretty and customizable svg spinners for React.js
Stars: ✭ 89 (-88.5%)
Mutual labels: spinner, loading, loading-animations, loading-spinner
loading
Laravel package to add loading indicator to pages while page is loading.
Stars: ✭ 38 (-95.09%)
Mutual labels: loader, spinner, loading-animations, loading-spinner
Epic Spinners
Easy to use css spinners collection with Vue.js integration
Stars: ✭ 3,548 (+358.4%)
Mutual labels: spinner, loading-animations, loading-spinner
Ngx Ui Loader
Multiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+
Stars: ✭ 368 (-52.45%)
Mutual labels: loader, loading, spinner
vue-loading
Loading bar for Vue.js apps using axios
Stars: ✭ 19 (-97.55%)
Mutual labels: loader, loading, loading-bar
Vue Progress Path
Progress bars and loading indicators for Vue.js
Stars: ✭ 309 (-60.08%)
Mutual labels: spinner, loading-spinner, loading-bar
ngx-loader-indicator
Awesome loader for angular applications. No wrappers only you elements
Stars: ✭ 44 (-94.32%)
Mutual labels: loader, loading, loading-spinner
ZXLoadingView
🍕ZXLoadingView is an iOS progress-activity
Stars: ✭ 14 (-98.19%)
Mutual labels: spinner, loading, spinners
Whirl
CSS loading animations with minimal effort!
whirl is a curation of CSS loading animations(whirls! 😅). It started as a drop in CSS file to get easy animations using :pseudo elements. It's now a collection of loading animations to use, take inspiration from, change and do what you want with 👍
No CSS distro?
It's inefficient. It's likely an app will only use one or two loaders. Pulling them all into an app would be overkill. Most projects use some form of bundling making it possible to import a single loader's styles.
Usage
You've got different options here.
You can install whirl and import the styles you want. You get both CSS and SASS files 👍
npm i @jh3y/whirl
yarn add @jh3y/whirl
Alternatively, you can grab the CSS or SASS and change to your needs. There's a dynamic link in the demo. Or visit the latest versions tag branch 👍
⚠️ Be aware that if you're bundling, you'll likely have to override some styles. Be careful with conflicting classnames or animation names.
Contributing
See CONTRIBUTING.
@jh3y 🐻 2019
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].