Question

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

除了视口值外，我无法找到一种具有相对边框宽度的方法。

如果不可能的话，我认为最好的方法是将负载分为小/中/大3类，但这又增加了一层复杂性。
可以将媒体查询用于父元素宽度而不是设备宽度吗？我认为这可以解决。
或者也许有一种不使用边框宽度的css-only微调器可以用作:: after元素？

我需要进行的基本测试是：

在整个页面上看起来都不错
在小按钮上看起来像一堂课
在移动中工作
只需添加一个类而无需更改其实际内容，就可以在任何元素中使用。
没有Java语言

由于我是CSS初学者，所以我也愿意接受外观更好的装载程序，并且不知道我在做什么。

提琴：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:40vmin;，但是如果您需要在按钮上使用它，则可能需要更改它。

Answer 2

使用conical-gradient和mask-image之类的不那么受支持的属性是可行的。

仅Chrome（可能）

body {
  background: lightgreen;
}

div.conic-gradient {
  width: 200px;
  height: 200px;
  margin: 1em auto;
  position: relative;
  border: 1px solid grey;
}

.conic-gradient:after {
  content: "";
  background: conic-gradient(
    blue 25%,
    transparent 0 50%,
    blue 0 75%,
    transparent 75%
  );
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(transparent 50%, rgba(0, 0, 0, 1) 50%);
  background-size: cover;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  animation: spinner 2s linear infinite;
}

@keyframes spinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

<div class="conic-gradient"></div>

Answer 3

您可以使用字体大小缩放微调器。并从父级继承字体大小；

.loading {
  box-sizing: border-box;
  clear: both;
  font-size: 1rem;
  position: relative;
}

.loading:after {
  animation: spinAround .5s infinite linear;
  border: 2px solid #dbdbdb;
  border-radius: 290486px;
  border-right-color: transparent;
  border-top-color: transparent;
  content: "";
  display: inline-flex;
  height: 1em;
  width: 1em;
}

.loading:after {
  position: absolute !important;
  z-index: 4;
}

.loading:after {
    font-size: inherit;
}

@keyframes spinAround {
  from {
    transform: rotate(0)
  }
  to {
    transform: rotate(359deg)
  }
}

<div class="loading">
Resize this window to see it in action !
</div>

在响应微调器中，css中的父元素是否可能具有动态边框宽度？

3 个答案: