css-loaders

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

  • 所有者: lukehaas/css-loaders
  • 平台: Web browsers
  • 许可证: MIT License
  • 分类:
  • 主题:
  • 喜欢:
    0
      比较:

Github星跟踪图

单元素 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)

主要指标

概览
名称与所有者lukehaas/css-loaders
主编程语言CSS
编程语言JavaScript (语言数: 4)
平台Web browsers
许可证MIT License
所有者活动
创建于2014-05-06 20:58:53
推送于2025-02-21 15:13:22
最后一次提交
发布数1
最新版本名称1.0.0 (发布于 )
第一版名称1.0.0 (发布于 )
用户参与
星数7.1k
关注者数162
派生数1k
提交数60
已启用问题?
问题数22
打开的问题数12
拉请求数6
打开的拉请求数9
关闭的拉请求数6
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?

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