All Projects β†’ loadingio β†’ Css Spinner

loadingio / Css Spinner

small, elegant pure css spinner for ajax or loading animation

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Css Spinner

Ngx Ui Loader
Multiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+
Stars: ✭ 368 (-63.67%)
Mutual labels:  loader, loading, spinner
Vue Loading Overlay
Vue.js component for full screen loading indicator πŸŒ€
Stars: ✭ 784 (-22.61%)
Mutual labels:  loader, loading, spinner
Loading Bar
Flexible, light weighted and super fast Progress Bar Library
Stars: ✭ 300 (-70.38%)
Mutual labels:  ajax, loader, loading
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-87.46%)
Mutual labels:  loader, loading, spinner
Vue Element Loading
⏳ Loading inside a container or full screen for Vue.js
Stars: ✭ 234 (-76.9%)
Mutual labels:  loader, loading, spinner
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-97.93%)
Mutual labels:  loader, spinner, loading
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (-23.59%)
Mutual labels:  loader, loading, spinner
Ng Block Ui
Block UI Loader/Spinner for Angular
Stars: ✭ 135 (-86.67%)
Mutual labels:  loader, loading, spinner
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+84.5%)
Mutual labels:  loader, loading, spinner
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (-74.93%)
Mutual labels:  loader, loading, spinner
busy-load
A flexible loading-mask jQuery-plugin
Stars: ✭ 76 (-92.5%)
Mutual labels:  loader, spinner, loading
Waitme
jquery plugin for easy creating loading css3/images animations
Stars: ✭ 302 (-70.19%)
Mutual labels:  loader, loading
Ng Http Loader
🍑 Smart angular HTTP interceptor - Intercepts automagically HTTP requests and shows a spinkit spinner / loader / progress bar
Stars: ✭ 327 (-67.72%)
Mutual labels:  loader, spinner
Spinners
A Sass mixin to generate fully customizable, pure CSS3 loading/busy indicators
Stars: ✭ 33 (-96.74%)
Mutual labels:  loading, spinner
Ssspinnerbutton
Forget about typical stereotypic loading, It's time to change. SSSpinnerButton is an elegant button with a diffrent spinner animations.
Stars: ✭ 357 (-64.76%)
Mutual labels:  loader, loading
React Loader Spinner
Collection set of react-spinner for async operation
Stars: ✭ 378 (-62.69%)
Mutual labels:  loader, spinner
Rsup Progress
❀️ A simple progress bar with promises support
Stars: ✭ 290 (-71.37%)
Mutual labels:  loader, loading
Yaspin
A lightweight terminal spinner for Python with safe pipes and redirects 🎁
Stars: ✭ 413 (-59.23%)
Mutual labels:  loader, spinner
Spinkit Objc
UIKit port of SpinKit
Stars: ✭ 743 (-26.65%)
Mutual labels:  loader, spinner
Loading
loading...ζ­£εœ¨εŠ θ½½δΈ­ηš„εŠ¨η”»ζ•ˆζžœ
Stars: ✭ 36 (-96.45%)
Mutual labels:  loader, loading

CSS-Spinner

Live Demo

collection of 12 small, elegant pure css spinners for your website loading animation.

css spinner

Features

  • vanilla - no external dependency and no additional library required.
  • standalone - use any of them separately.
  • customizable - use Stylus variables to quickly customize them to fit your need.
  • easy to use - simple as copy and paste while also simple to use with pug mixins.
  • small - average size 1K per spinner unminimized, unzipped

Usage

loading.io provides a web interface to quickly choose and copy your desired spinners, yet you can still find the source code in this repository. The simplest usage is as:

  1. Find and download the html file of desired loader under build/ folder.
  2. Copy its content to the place you want to use this loader.
  3. Done.

Separated CSS and HTML files are also available under build folder so that you can reuse the css to reduce payload size.

We also provide stylus and pug source files for better integrating these spinners into your project. Find corresponding stylus and pug files for your desired spinners under src/ folders.

Additionally, you will need vars.styl and basic.styl if you are going to build by yourself. See following section for more detail.

Customization

To customize speed and color of a loader, first ensure you have stylus install locally ( you will need npm too ):

npm install -g stylus

then, edit vars.styl with your desired configuration. for now you can edit the following style of a spinner:

  • size
  • color
  • speed

once you've done with the editing, run stylus to build yourself a css file:

stylus -o . --import vars.styl --import basic.styl src/<desired-loader>/main.styl

use the generated main.css together with build//main.html to add this loader in your project.

Browser Compatibility

These spinners use CSS Animation and Transformation which is widely supported by major modern browsers except IE<=9. To support older browsers like IE9, please use loading.io to generate alternative GIF Loaders instead.

License

All loader files here are released under CC0 License. However, you could attribute to this link: loading.io css spinner ( https://loading.io/css/ ) to give loading.io a thumbs-up.

Other Resources

If you want to make custom css loading animation, loading.io also provides loading.css - A pure CSS loading animation library, and a helper GIF builder. Don't forget to check it out and share your customized loader with us!

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