28个纯CSS框架Loaders.css加载动画

loaders

Loaders.css是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可实现,因此运行效率比较不错。

Loaders.css的特点

  • 基于纯CSS,不需JavaScript脚本,也不需要图片,很干净。
  • 默认提供近30个不同的Loading动画效果,你也可以发挥自己的想象来实现不同的加载动画。
  • Loaders.css比较轻巧,基本没什么臃肿的文件。
  • 免费、开源,这是必须的。

下面是第一行第4个Loading动画的CSS代码,其他的大家可以在源代码中查看。

.ball-clip-rotate-pulse {
  position: relative;
  -webkit-transform: translateY(-15px);
  -ms-transform: translateY(-15px);
  transform: translateY(-15px); }

/* line 262, stdin */
.ball-clip-rotate-pulse > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 100%; }

/* line 269, stdin */
.ball-clip-rotate-pulse > div:first-child {
  background: #fff;
  height: 16px;
  width: 16px;
  top: 9px;
  left: 9px;
  -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }

/* line 277, stdin */
.ball-clip-rotate-pulse > div:last-child {
  position: absolute;
  border: 2px solid #fff;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 2px solid;
  border-color: #fff transparent #fff transparent;
  -webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -webkit-animation-duration: 1s;
  animation-duration: 1s; }