LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

css-loaders,一款神奇的开源加载旋转器

admin
2024年10月12日 9:52 本文热度 307
  • • Github Star: 7k[1]

css-loaders 是什么?

css-loaders 是一套开源单元素 CSS 旋转器,提供了一组使用纯 CSS 编写的加载动画 Spinners。加载动画通常用在用户需要等待数据加载或页面渲染完成时,css-loaders 提供的加载动画由单个 HTML 元素和 CSS 样式组成,不需要额外的图形或 JavaScript 代码。

CSS spinners 的优点包括:

  • • 轻量级:由于只使用 CSS,它们不会增加页面的 JavaScript 负载。

  • • 易于实现:只需在 HTML 中添加一个元素,并应用相应的 CSS 类即可。

  • • 可定制:可以通过修改 CSS 属性来调整颜色、大小和动画速度。

  • • 响应式:可以很容易地适应不同的屏幕尺寸和分辨率。

效果展示

回复 demo 获取示例代码

快速开始

定义 DOM 结构,必须包含类名为 .loader 的 div 元素。

<div class="load load1">
  <div class="loader"></div>
</div>

引入 CSS 样式,从 Github 下载项目,作者贴心的提供了三种版本:csssassscss 。

.load1 .loader,
.load1 .loader:before,
.load1 .loader:after {
  background#ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width1em;
  height4em;
}
.load1 .loader {
  color#ffffff;
  text-indent: -9999em;
  margin88px auto;
  position: relative;
  font-size11px;
  -webkit-transformtranslateZ(0);
  -ms-transformtranslateZ(0);
  transformtranslateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.load1 .loader:before,
.load1 .loader:after {
  position: absolute;
  top0;
  content'';
}
.load1 .loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.load1 .loader:after {
  left1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow0 0;
    height4em;
  }
  40% {
    box-shadow0 -2em;
    height5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow0 0;
    height4em;
  }
  40% {
    box-shadow0 -2em;
    height5em;
  }
}

可以根据需要对 CSS 样式进行调整,修改样式,尺寸等。

祝好!

引用链接

[1] Github Star: 7k: https://github.com/lukehaas/css-loaders


该文章在 2024/10/12 9:52:52 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved