Simple loading spinners animated with CSS. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations. Add spinkit.css or spinkit.min.css to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need). Add a spinner to your project by copy-pasting HTML from spinkit.css or examples.html. Add the sk-center utility class to the spinner to center it (it sets margin to auto). By default, the width and height of all spinners are set to 40px. background-color is set to #333. Configure the spinner by overwriting the CSS variables, primarily --sk-size (spinner width & height) and --sk-color (spinner color). If you need broader browser support, remove the CSS variables.
Features
- Simple loading spinners animated with CSS
- SpinKit uses CSS animations and variables
- Create smooth and easily customizable animations
- There are no dependencies between spinners
- Add a spinner to your project by copy-pasting HTMLject by copy-pasting HTML
- Configure the spinner by overwriting the CSS variables
License
MIT LicenseFollow SpinKit
Shopify offers plans for anyone that wants to sell products online and build an ecommerce store, small to mid-sized businesses as well as enterprise