css-loaders

一个用CSS动画加载的旋转器集合。(A collection of loading spinners animated with CSS)

  • Owner: lukehaas/css-loaders
  • Platform: Web browsers
  • License:: MIT License
  • Category::
  • Topic:
  • Like:
    0
      Compare:

Github stars Tracking Chart







单元素 CSS 旋转器

这是一个使用 CSS 动画加载 spinners 的集合。

每一个 spinner 都是由一个单独的 div 组成,类为 loader,内容为 "Loading..."。这些文字是为屏幕阅读器准备的,可以作为旧版浏览器的后备状态。

这个项目的目的是创建一组最小化的加载旋转器,既要有视觉吸引力,又要传达出它们的预期意义。

本项目严格限制每个加载器只有一个元素(不包括伪元素),因为我们相信像加载器这样简单的东西不应该有更多的元素。

每个加载器都有一个以像素为单位的字体大小,其他所有的大小都是以ems为单位的,所以要改变加载器的大小,只需调整字体大小即可。

演示

css-loaders-screenshot

立即在线体验

浏览器支持

IE Chrome Firefox Opera Safari
IE 10+ heavy_check_mark Chrome 4.0+ heavy_check_mark Firefox 16.0+ heavy_check_mark Opera 15.0+ heavy_check_mark Safari 4.0+ heavy_check_mark

历程

详细的更新日志,请查看发布

许可证

MIT License


(The first version translated by vz on 2020.08.29)

Main metrics

Overview
Name With Ownerlukehaas/css-loaders
Primary LanguageCSS
Program languageJavaScript (Language Count: 4)
PlatformWeb browsers
License:MIT License
所有者活动
Created At2014-05-06 20:58:53
Pushed At2025-02-21 15:13:22
Last Commit At
Release Count1
Last Release Name1.0.0 (Posted on )
First Release Name1.0.0 (Posted on )
用户参与
Stargazers Count7.1k
Watchers Count162
Fork Count1k
Commits Count60
Has Issues Enabled
Issues Count22
Issue Open Count12
Pull Requests Count6
Pull Requests Open Count9
Pull Requests Close Count6
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

Single Element CSS Spinners

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

Check it live.

Browser Support

IE

未分类

RunJS

A JavaScript playground that auto-evaluates as you type