Loading...
Loading...
生成纯 CSS 加载动画,带实时预览。
加载动画无处不在,而你很少需要为它用图片或库。这个工具用几个选项生成纯 CSS 加载器并实时播放,让你把干净的 spinner 放进任何页面。
选一种样式(旋转环、三个弹跳圆点、均衡器条形或脉冲圆),再设尺寸、颜色和动画速度。预览用你的确切设置播放,输出是 HTML 片段加 CSS(含关键帧),可直接粘贴。因为是纯 CSS,所以缩放清晰、不增加网络请求,且在 GPU 上运行。一切都在浏览器里生成。
环形、圆点、条形和脉冲加载器可选。
预览按你的尺寸、颜色和速度播放。
调好加载器最关键的三件事。
输出含标记和关键帧 CSS。
纯 CSS,缩放清晰、不增加请求。
把片段直接粘进你的项目。
加载动画时长保持在一秒左右;太快显得慌张,太慢可能像卡住了。
选一种加载器样式。
设置尺寸、颜色和速度。
看实时预览。
把 HTML 和 CSS 复制进你的页面。
数据或页面加载时显示 spinner。
请求期间在按钮里放一个小加载器。
在面板或弹窗遮罩里居中放一个加载器。
不引库就加一个精致的 spinner。
每种样式按你的尺寸、颜色和速度渲染,用基于 transform 的关键帧动画,同一组值写进可复制的 HTML 和 CSS 片段。
无账号、无网络请求;加载器在你的浏览器本地生成。
transform 和 opacity 动画在 GPU 上运行,所以 spinner 流畅又省。