使CSS3微调器大小匹配元素

Question

我找到了一个很好的CSS3 Spinner的代码（来自这里的链接：https://ihatetomatoes.net/create-css3-spinning-preloader/），我在我的页面中实现了它。我想将其转换为能够以相对百分比的高度和宽度进行渲染。

在CodePen上演示：

http://codepen.io/anon/pen/jBWmZY

我的问题

如何变换微调器以使其使用百分比宽度和高度而不是固定100px。

目的是使其能够扩展到（我的编码器上的包装器）可用高度。

正如您在演示中看到的那样，div很小。装载机不会缩放，因为它的高度和宽度是固定的。

我尝试简单地转换如下：

.loader-spinner {
    position: relative;
}
.loader {
    width: 50%;
    height: 50%;
    min-height: 35px;
    min-width: 35px;
}

但结果并非如预期。如果div太小，我使用包装器设置35px的最小高度，但它不能正常工作。边界半径似乎不遵循，大小相当不匹配。在这里演示：http://codepen.io/anon/pen/jBWmKZ

我想我会想念包装器或其他类似的东西。

Answer 1

问题在于，当您将值更改为百分比时，宽度和高度不会保持同步。

装载机的工作原理是因为高度和宽度一起形成一个由边界半径

舍入的正方形

将您的装载程序类更改为

.loader {
        display: block;
        position: relative;
        left: 100%;
        top: 100%;
        width: 14%;                // These values roughly keep your
        height: 98%;               // width and height in sync
        border-radius: 50% !important;
        border: 3px solid transparent;
        border-top-color: #3498db;
        -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

        &:before {
            ....
        }

        &:after {
            ....
        }

这适用于1920x1080分辨率。您必须使用媒体查询为每个分辨率定义不同的值。