https://github.com/lukehaas/css-loaders

A collection of loading spinners animated with CSS
https://github.com/lukehaas/css-loaders

Last synced: 3 days ago
JSON representation

A collection of loading spinners animated with CSS

• Host: GitHub
• URL: https://github.com/lukehaas/css-loaders
• Owner: lukehaas
• License: mit
• Created: 2014-05-06T20:58:53.000Z (over 10 years ago)
• Default Branch: step2
• Last Pushed: 2024-04-30T16:55:53.000Z (9 months ago)
• Last Synced: 2025-01-08T16:16:09.214Z (3 days ago)
• Language: CSS
• Size: 120 KB
• Stars: 7,050
• Watchers: 163
• Forks: 1,039
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-javascript-cn - 官网
• awesome-loading-indicators - Single Element CSS Spinners - A collection of loading spinners animated with CSS. (CSS)
• awesome-javascript - css-loaders - A collection of loading spinners animated with CSS - ★ 5716 (Loading Status)
• awesome-web-animation - Css-loaders - A collection of loading spinners animated with CSS. (CSS)
• awesome - lukehaas/css-loaders - A collection of loading spinners animated with CSS (CSS)
• awesome - lukehaas/css-loaders - A collection of loading spinners animated with CSS (CSS)
• jimsghstars - lukehaas/css-loaders - A collection of loading spinners animated with CSS (CSS)

README

        
# [Single Element CSS Spinners](http://projects.lukehaas.me/css-loaders)

This is a collection of loading spinners animated with CSS.

Each spinner consists of a single `div` with a class of `loader` and content text of "Loading...".

The text is for screen readers and can be used as a fallback state for older browsers.

The aim of this project was to create a set of minimal loading spinners that are visually appealing and also convey their intended meaning.

A strict limit of one element per loader (not including pseudo-elements) was placed on this project based on the belief that something as simple as a loader doesn't deserve more.

Each loader is given a font size in pixels and all other sizes are in ems so to change the size of a loader, just adjust the font-size.

## Demo

[![css-loaders-screenshot](https://raw.githubusercontent.com/lukehaas/css-loaders/step2/images/css-loaders-screenshot.jpg)](http://projects.lukehaas.me/css-loaders)

> [Check it live](http://projects.lukehaas.me/css-loaders).

## Browser Support

![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)

--- | --- | --- | --- | --- |

IE 10+ ✔ | Chrome 4.0+ ✔ | Firefox 16.0+ ✔ | Opera 15.0+ ✔ | Safari 4.0+ ✔ |

## Contributing

1. Fork it!

2. Create your feature branch: `git checkout -b my-new-feature`

3. Commit your changes: `git commit -m 'Add some feature'`

4. Push to the branch: `git push origin my-new-feature`

5. Submit a pull request :)

## History

For detailed changelog, check [Releases](https://github.com/lukehaas/css-loaders/releases).

## License

[MIT License](https://github.com/lukehaas/css-loaders/blob/step2/LICENSE)

Browser testing via [![lambda test](https://www.lambdatest.com/support/img/logo.svg)](https://www.lambdatest.com/)