自定义纺纱机是一种有趣的方式来呼吸你的网页的生命。

你可以找到很多定制站点提供免费纺纱机作为GIF。但是，如果您想使用CSS和SVG创建动画呢？

这就是这篇文章的目标，因为我将分享一堆免费的定制纺丝器，它们都是由CSS驱动的。

不管你是在设计一个Ajax驱动的应用程序，还是想给你的站点添加一个有趣的预加载程序，不管是哪种方式，这些片段都是为工作而构建的。

1.各种CSS纺纱机

这个出色的自定义CSS纺丝器集合来自于开发者IulianSavin。

在这里你会发现大量的动画样式，从旋转的圆圈到动画条，甚至还有一个自定义的乒乓风格的加载器。说真的那个太棒了。

这些装载机都是完全可用资产您可以将其复制/粘贴到您自己的项目中。

请注意，这些纺丝器也来自这个GitHub回购在这里，您可以下载源代码的全部。通常比从代码笔复制/粘贴要容易一些。

2.月食旋转器

这是一个超级独特的旋转器，模仿日食。或者某种灯光显示…我不太确定，但我知道看起来很棒。

整个过程依赖于非常少的HTML，而且它被削减得更小，这要归功于哈梅尔模板。

您可以将Haml和Sass代码编译成普通的HTML/CSS，如果这对您来说也更容易定制的话。

3.超级简单的CSS旋转器

它不会比一个灯火通明的圆圈简单得多。

这正是托马斯·曼德利德创造的设计所能找到的。这是一个超级基本的代码片段，CSS旋转器是一个真实的景象。

这不是这个名单上最时尚的设计之一，但它做的工作。

记住这一点，如果你需要一个基本的旋转器，将匹配任何网站。

4.Beaulti圈

我不太清楚Beaulti循环的名字和什么有什么关系。

但是我确信这个定制的css自旋器是疯狂酷。动画风格太有趣了，然后你会意识到这完全是用CSS和HTML构建的。更令人印象深刻。

整个圆圈设计是超级干净和极简主义。它会迅速抓住你的注意力，使它完美地作为一个定制的纺纱装载机。

我确实认为这对公司网站来说有点浮华，但是如果你把颜色更新成浅蓝色，再把它变小一点，这个东西就能用了。

5.纯CSS纺纱机

开发人员马克卡恩把这些纯粹的CSS纺丝为您的享受。

这里有一个非常有趣的混合，在不同的颜色之间交替，再加上一个旋转的所有颜色一起在一个彩虹。他们看起来很激进，很专注于科技。

如果你喜欢这个旋转器的黑色设计，它可以很好地为你的网站工作。只需确保您自定义旋转器的颜色，以匹配您的布局。

6.纺纱机W/字体图标

下面是一个非常有趣的想法，将定制CSS 3动画与免费图标字体.

在这支笔里，你会发现一堆来自Icomon的图标。但它们都是动画，使用CSS创建旋转图形，看上去像定制的纺丝器。

基本上它们是定制的纺纱机。因为它们对CSS中的字体属性进行操作，所以只需对它们进行更多的操作。

看看这个，试着把设计弄得乱七八糟。经过15-20分钟的修修补补，你可能会喜欢最终的结果。

7.奥林匹克环

这肯定是我一段时间以来见过的最有创意的装载机之一。

如果你把奥运五环合并成一个HTML文档，再加上CSS 3，你就会得到这个优秀的旋转器设计。

您会发现少量JavaScript代码，但是不直接处理动画。该代码处理延迟，通过JavaScript更容易管理。其他一切都只是CSS。

尽管如此，您仍然可以将其转化为一个纯CSS解决方案，只需做一些修改。我几乎认为奥运会组织者应该把这个装载机添加到他们的网站上。

8.纯CSS Android预装纺纱机

这里有一个非常酷的加载旋转集，它是在典型的Android加载图形之后设计的。

如果你曾经使用过Android，你会发现很多这些加载图形。它们当然不是100%的复制品，但它们非常接近。

这支笔只使用纯CSS，这使它成为任何一个网页开发人员的绝佳选择。

9.弹跳延迟装载机

虽然这个例子在技术上并不是一个旋转器，但是它还是太酷了，不能从这个列表中删除。

开发人员JoniTrythall从零开始创建了这些弹跳加载器球，使用了一点CSS和一些创造性的奇思妙想。

代码本身运行在Haml&SCSS上，但您可以轻松地将其编译到CodePen中的原始HTML/CSS。这可能更容易复制/粘贴到您的页面，如果您不熟悉预处理.

10.旋转点

最后，但肯定不是最不重要的是这个超级有趣的旋转装载机。

它是由较小的点组成的，它们都经历了一个周期的旋转。这意味着它被设计为在特定的点上减速，所有的点都排列在一起，然后加速完成另一场革命。

毫无疑问，这个旋转器会在你的页面上翻过头来。它也足够微妙，它可以轻松地融入任何布局。

开发人员ormer Fatih在创建这段代码时考虑到了简单性，因此您可以让它只使用8行HTML和不到50行的CSS。

异想天开极简主义用一些额外的东西来吸引你的注意力。