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