html - 是否可以在响应式微调器中使用与 css 中的父元素相关的动态边框宽度？

Question

基本上我一直在尝试实现一个简单的微调器类，它可以附加到任何元素，包括一个小按钮或整个页面。

除了视口(viewport)值之外，我还没有找到一种方法来获得相对的边框宽度。

• 如果不可能，我认为最好的方法是将加载分为 3 个类，小型/中型/大型，但这又增加了一层复杂性。
• 能否使用媒体查询来获取父元素宽度而不是设备宽度？我认为这会解决问题。
• 或者也许有一种不依赖边框宽度的纯 css 微调器可以用作::after 元素？

它需要对我进行的基本测试是:

1. 在整个页面上看起来像一个类
2. 在一个小按钮上看起来像一个类
3. 在移动设备上工作
4. 只需添加一个类即可在任何元素中使用，而无需更改其实际内容。
5. 没有Javascript

我也对外观更好的加载程序持开放态度，因为我是一个 css 初学者并且不知道我在做什么。

fiddle :http://jsfiddle.net/ppgab/adfnc5tk/6/

我目前拥有的代码:

/*Spinner with overlay and no mouse events*/
@keyframes spinner {
    to {transform: rotate(360deg);}
}
.loading::before {
    position:absolute;
    content : '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: gray;
    z-index: 2;
    opacity: 0.65;
}
.loading:after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    /*! height: 5rem; */
    margin-top: -12.5%;
    margin-left: -12.5%;
    border-radius: 50%;
    border: solid transparent;
    border-top-color: #07d;
    border-bottom-color: #07d;
    animation: spinner .8s ease infinite;
    z-index:3;
    padding-top: calc(12.5% - 1em);
    border-width: 1em;
    padding-bottom: calc(12.5% - 1em);
}
.loading {
    pointer-events: none;
    cursor: wait;
}

.text-center {
  text-align:center;
}

Answer 1

如果响应式 border-width 我会使用 SVG，尽管在 SVG 的情况下它会是一个笔画。

/*Spinner with overlay and no mouse events*/
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.loading::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: gray;
  z-index: 2;
  opacity: 0.65;
}

.loading {
  pointer-events: none;
  cursor: wait;
}

.text-center {
  text-align: center;
}

svg {
  z-index: 2;
  width: 40vmin;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: spinner .8s ease infinite;
}

<div class="loading text-center">
<h1>
  Resize this window to see it in action !
</h1>
<h3>
But if you reduce the width too much it gets ugly :(
</h3>
<button>
 You can't click me!
</button>

</div>
  <svg viewBox="-50 -50 100 100">
    <circle r="46" fill="none" stroke="#07d" stroke-width="7" stroke-dasharray="72.26" stroke-dashoffset="-36.13" />
  </svg>

在 CSS 中我使用的是 width: width:40vmin; 但如果您需要在按钮上使用它，您可能需要更改它。