html - 一个窗体一个按钮和一个旋转加载器里面-6ren

html - 一个窗体一个按钮和一个旋转加载器里面

转载作者：行者123 更新时间：2023-12-04 07:15:09

我有两个元素想要将它们混合在一起，一个按钮和一个简单的 装载机 .每个元素单独工作正常，但我想将它们放在一起，以便加载器位于按钮的中心，并且表单的样式仍然不会破坏......
这是单独的加载器:
请注意，如果 disabled类(class)附于 submit-container加载器将是可见 :

.btn {
  font-family: "IRANSansWeb";
  max-width: 200px;
  width: 100%;
  height: 40px;
  font-weight: 600;
  margin: 5px 0;
  margin-top: 15px;
  cursor: pointer;
  opacity: 1;
  background: linear-gradient(to right, #9672fb, #d772fb);
  border-radius: 30px;
  border: none;
  color: white;
  box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
  transition: 0.2s;

}

.submit-container:not(.disabled) .btn:active {
  transform: translateY(5px) !important;
  box-shadow: none !important;
}

.submit-container:not(.disabled) .btn:hover {
  transform: translateY(1px);
  box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}

.submit-container.disabled .submit {
  opacity: 0.5;
  cursor: default;
}

.submit-container.disabled .spinner {
  display: inline-block;
}

.submit-container {
  display: flex;
  flex-direction: row;
  max-width: 200px;
  width: 100%;
  position: relative;
}

.modal .submit-container {
  height: 70px;
}

.spinner {
  font-size: 20px;
  position: absolute;
  display: none;
  width: 1em;
  height: 1em;
}
.spinner.center {
  left: 8%;
  top: 50%;
  margin-top: -5px;
}

.spinner-blade {
  position: absolute;
  left: 0.4629em;
  bottom: 0;
  width: 0.074em;
  height: 0.2777em;
  border-radius: 0.5em;
  background-color: transparent;
  transform-origin: center -0.2222em;
  -webkit-animation: spinner-fade 1s infinite linear;
          animation: spinner-fade 1s infinite linear;
}
.spinner-blade:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  transform: rotate(0deg);
}
.spinner-blade:nth-child(2) {
  -webkit-animation-delay: 0.083s;
          animation-delay: 0.083s;
  transform: rotate(30deg);
}
.spinner-blade:nth-child(3) {
  -webkit-animation-delay: 0.166s;
          animation-delay: 0.166s;
  transform: rotate(60deg);
}
.spinner-blade:nth-child(4) {
  -webkit-animation-delay: 0.249s;
          animation-delay: 0.249s;
  transform: rotate(90deg);
}
.spinner-blade:nth-child(5) {
  -webkit-animation-delay: 0.332s;
          animation-delay: 0.332s;
  transform: rotate(120deg);
}
.spinner-blade:nth-child(6) {
  -webkit-animation-delay: 0.415s;
          animation-delay: 0.415s;
  transform: rotate(150deg);
}
.spinner-blade:nth-child(7) {
  -webkit-animation-delay: 0.498s;
          animation-delay: 0.498s;
  transform: rotate(180deg);
}
.spinner-blade:nth-child(8) {
  -webkit-animation-delay: 0.581s;
          animation-delay: 0.581s;
  transform: rotate(210deg);
}
.spinner-blade:nth-child(9) {
  -webkit-animation-delay: 0.664s;
          animation-delay: 0.664s;
  transform: rotate(240deg);
}
.spinner-blade:nth-child(10) {
  -webkit-animation-delay: 0.747s;
          animation-delay: 0.747s;
  transform: rotate(270deg);
}
.spinner-blade:nth-child(11) {
  -webkit-animation-delay: 0.83s;
          animation-delay: 0.83s;
  transform: rotate(300deg);
}
.spinner-blade:nth-child(12) {
  -webkit-animation-delay: 0.913s;
          animation-delay: 0.913s;
  transform: rotate(330deg);
}

@-webkit-keyframes spinner-fade {
  0% {
    background-color: #51386b;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes spinner-fade {
  0% {
    background-color: #51386b;
  }
  100% {
    background-color: transparent;
  }
}

<div class="submit-container disabled">
                  
  <div class="spinner center">
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
    <div class="spinner-blade"></div>
  </div>

</div>

现在我尝试将按钮和加载器放在一起:

.btn {
  font-family: "IRANSansWeb";
  max-width: 200px;
  width: 100%;
  height: 40px;
  font-weight: 600;
  margin: 5px 0;
  margin-top: 15px;
  cursor: pointer;
  opacity: 1;
  background: linear-gradient(to right, #9672fb, #d772fb);
  border-radius: 30px;
  border: none;
  color: white;
  box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
  transition: 0.2s;

}

.submit-container:not(.disabled) .btn:active {
  transform: translateY(5px) !important;
  box-shadow: none !important;
}

.submit-container:not(.disabled) .btn:hover {
  transform: translateY(1px);
  box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}

.submit-container.disabled .submit {
  opacity: 0.5;
  cursor: default;
}

.submit-container.disabled .spinner {
  display: inline-block;
}

.submit-container {
  display: flex;
  flex-direction: row;
  max-width: 200px;
  width: 100%;
  position: relative;
}

.modal .submit-container {
  height: 70px;
}

.spinner {
  font-size: 20px;
  position: absolute;
  display: none;
  width: 1em;
  height: 1em;
}
.spinner.center {
  left: 8%;
  top: 50%;
  margin-top: -5px;
}

.spinner-blade {
  position: absolute;
  left: 0.4629em;
  bottom: 0;
  width: 0.074em;
  height: 0.2777em;
  border-radius: 0.5em;
  background-color: transparent;
  transform-origin: center -0.2222em;
  -webkit-animation: spinner-fade 1s infinite linear;
          animation: spinner-fade 1s infinite linear;
}
.spinner-blade:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  transform: rotate(0deg);
}
.spinner-blade:nth-child(2) {
  -webkit-animation-delay: 0.083s;
          animation-delay: 0.083s;
  transform: rotate(30deg);
}
.spinner-blade:nth-child(3) {
  -webkit-animation-delay: 0.166s;
          animation-delay: 0.166s;
  transform: rotate(60deg);
}
.spinner-blade:nth-child(4) {
  -webkit-animation-delay: 0.249s;
          animation-delay: 0.249s;
  transform: rotate(90deg);
}
.spinner-blade:nth-child(5) {
  -webkit-animation-delay: 0.332s;
          animation-delay: 0.332s;
  transform: rotate(120deg);
}
.spinner-blade:nth-child(6) {
  -webkit-animation-delay: 0.415s;
          animation-delay: 0.415s;
  transform: rotate(150deg);
}
.spinner-blade:nth-child(7) {
  -webkit-animation-delay: 0.498s;
          animation-delay: 0.498s;
  transform: rotate(180deg);
}
.spinner-blade:nth-child(8) {
  -webkit-animation-delay: 0.581s;
          animation-delay: 0.581s;
  transform: rotate(210deg);
}
.spinner-blade:nth-child(9) {
  -webkit-animation-delay: 0.664s;
          animation-delay: 0.664s;
  transform: rotate(240deg);
}
.spinner-blade:nth-child(10) {
  -webkit-animation-delay: 0.747s;
          animation-delay: 0.747s;
  transform: rotate(270deg);
}
.spinner-blade:nth-child(11) {
  -webkit-animation-delay: 0.83s;
          animation-delay: 0.83s;
  transform: rotate(300deg);
}
.spinner-blade:nth-child(12) {
  -webkit-animation-delay: 0.913s;
          animation-delay: 0.913s;
  transform: rotate(330deg);
}

@-webkit-keyframes spinner-fade {
  0% {
    background-color: #51386b;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes spinner-fade {
  0% {
    background-color: #51386b;
  }
  100% {
    background-color: transparent;
  }
}


.settings-input label{
  align-self: flex-start;
  margin-bottom: 3px;
  font-size: 13px;
  color: #a697bb;
}

.settings-input .input-field {
  display: flex;
  flex-direction: column;
  margin: 15px;
}

.settings-input div,
.settings-input .input-field,
.settings-input input {
  position: relative;
}

.settings-input .container {
  width: 300px;
  display: flex;
  align-items: center;
}


.settings-input button {
  text-align: center;
  font-family: "IRANSansWeb_Light";
  font-size: 11.5px;
  position: absolute;
  left: 0;
  background-color: #8f7cff;
  outline: none;
  border: none;
  color: #00eff3;
  cursor: pointer;
  padding: 3.5px 0;
  direction: ltr;
  width: 3rem;
}

.settings-input button:hover {
  color: white;
  background-color: #9e91ef;
}


.settings-input input {
  font-family: "Open Sans";
  font-size: 13px;
  display: inline-block;
  direction: ltr;
  text-align: center;
  outline: none;
  width: 300px;
  background: #edc3ff4a;
  color: #743db0;
  padding: 4px 4px;
  border-radius: 3px;
  border: solid 1px;
  border-color: transparent;
  transition: all 0.3s ease-in;
  padding-left: 1.2rem;
}
  
.settings-input input:focus {
  color: #8e5bc5;
  background: #fff;
  border-color: #e38fff;
}

<div class="settings-input">


              <div class="input-field">
                <label>phone</label>
                <div id="phone-input" class="container">
                  <input type="text" placeholder="enter your phone" />

                  <div class="submit-container disabled">
                    <div class="spinner center">
                        <div class="spinner-blade"></div>
                        <div class="spinner-blade"></div>
                        <div class="spinner-blade"></div>
                        <div class="spinner-blade"></div>
                        <div class="spinner-blade"></div>
                        <div class="spinner-blade"></div>
                        <div class="spinner-blade"></div>
                        <div class="spinner-blade"></div>
                        <div class="spinner-blade"></div>
                        <div class="spinner-blade"></div>
                        <div class="spinner-blade"></div>
                        <div class="spinner-blade"></div>
                    </div>
                    <button>apply</button>
                  </div>



                </div>
              </div>

              <div class="input-field">
                <label>email</label>
                <div id="email-input" class="container">
                  <input type="email" placeholder="enter your email" />
                  <button>apply</button>
                </div>
              </div>

            </div>

正如你看到的形式废墟的风格，甚至出现加载器失真......
我只想将加载器放在按钮的中心而不破坏表单样式..
我怎样才能做到这一点？

最佳答案

我没有像评论中写的那样改进代码。但这只是解决了您的问题。您可以稍后再改进布局。
问题是position: relative将创建一个新的布局上下文。在这种情况下，一切都可以沿 z 轴分层，所有具有 position: absolute 的子元素都可以。将引用最近的亲戚 parent 。因此，您会得到这种失真效果。
删除了这个...

.settings-input div,
.settings-input .input-field,
.settings-input input {
  position: relative;
}

补充说...

button { [...] position: relative; }

我将微调器移到按钮内。
干得好:

.btn {
  font-family: "IRANSansWeb";
  max-width: 200px;
  width: 100%;
  height: 40px;
  font-weight: 600;
  margin: 5px 0;
  margin-top: 15px;
  cursor: pointer;
  opacity: 1;
  background: linear-gradient(to right, #9672fb, #d772fb);
  border-radius: 30px;
  border: none;
  color: white;
  box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
  transition: 0.2s;
}

.submit-container:not(.disabled) .btn:active {
  transform: translateY(5px) !important;
  box-shadow: none !important;
}

.submit-container:not(.disabled) .btn:hover {
  transform: translateY(1px);
  box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}

.submit-container.disabled .submit {
  opacity: 0.5;
  cursor: default;
}

.submit-container.disabled .spinner {
  display: inline-block;
}

.submit-container {
  display: flex;
  flex-direction: row;
  max-width: 200px;
  width: 100%;
  position: relative;
}

.modal .submit-container {
  height: 70px;
}

.spinner {
  font-size: 20px;
  position: absolute;
  display: none;
  width: 1em;
  height: 1em;
}

.spinner.center {
  left: 8%;
  top: 50%;
  transform: translateY(-50%)
}

.spinner-blade {
  position: absolute;
  left: 0.4629em;
  bottom: 0;
  width: 0.074em;
  height: 0.2777em;
  border-radius: 0.5em;
  background-color: transparent;
  transform-origin: center -0.2222em;
  -webkit-animation: spinner-fade 1s infinite linear;
  animation: spinner-fade 1s infinite linear;
}

.spinner-blade:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  transform: rotate(0deg);
}

.spinner-blade:nth-child(2) {
  -webkit-animation-delay: 0.083s;
  animation-delay: 0.083s;
  transform: rotate(30deg);
}

.spinner-blade:nth-child(3) {
  -webkit-animation-delay: 0.166s;
  animation-delay: 0.166s;
  transform: rotate(60deg);
}

.spinner-blade:nth-child(4) {
  -webkit-animation-delay: 0.249s;
  animation-delay: 0.249s;
  transform: rotate(90deg);
}

.spinner-blade:nth-child(5) {
  -webkit-animation-delay: 0.332s;
  animation-delay: 0.332s;
  transform: rotate(120deg);
}

.spinner-blade:nth-child(6) {
  -webkit-animation-delay: 0.415s;
  animation-delay: 0.415s;
  transform: rotate(150deg);
}

.spinner-blade:nth-child(7) {
  -webkit-animation-delay: 0.498s;
  animation-delay: 0.498s;
  transform: rotate(180deg);
}

.spinner-blade:nth-child(8) {
  -webkit-animation-delay: 0.581s;
  animation-delay: 0.581s;
  transform: rotate(210deg);
}

.spinner-blade:nth-child(9) {
  -webkit-animation-delay: 0.664s;
  animation-delay: 0.664s;
  transform: rotate(240deg);
}

.spinner-blade:nth-child(10) {
  -webkit-animation-delay: 0.747s;
  animation-delay: 0.747s;
  transform: rotate(270deg);
}

.spinner-blade:nth-child(11) {
  -webkit-animation-delay: 0.83s;
  animation-delay: 0.83s;
  transform: rotate(300deg);
}

.spinner-blade:nth-child(12) {
  -webkit-animation-delay: 0.913s;
  animation-delay: 0.913s;
  transform: rotate(330deg);
}

@-webkit-keyframes spinner-fade {
  0% {
    background-color: #51386b;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes spinner-fade {
  0% {
    background-color: #51386b;
  }
  100% {
    background-color: transparent;
  }
}

.settings-input label {
  align-self: flex-start;
  margin-bottom: 3px;
  font-size: 13px;
  color: #a697bb;
}

.settings-input .input-field {
  display: flex;
  flex-direction: column;
  margin: 15px;
}

.settings-input .container {
  width: 300px;
  display: flex;
  align-items: center;
}

.settings-input button {
  text-align: center;
  font-family: "IRANSansWeb_Light";
  font-size: 11.5px;
  position: relative;
  left: 0;
  background-color: #8f7cff;
  outline: none;
  border: none;
  color: #00eff3;
  cursor: pointer;
  padding: 3.5px 0;
  direction: ltr;
  width: 3rem;
}

.settings-input button:hover {
  color: white;
  background-color: #9e91ef;
}

.settings-input input {
  font-family: "Open Sans";
  font-size: 13px;
  direction: ltr;
  text-align: center;
  outline: none;
  width: 300px;
  background: #edc3ff4a;
  color: #743db0;
  padding: 4px 4px;
  border-radius: 3px;
  border: solid 1px;
  border-color: transparent;
  transition: all 0.3s ease-in;
  padding-left: 1.2rem;
  box-sizing: border-box;
}

.settings-input input:focus {
  color: #8e5bc5;
  background: #fff;
  border-color: #e38fff;
}

<div class="settings-input">


  <div class="input-field">
    <label>phone</label>
    <div id="phone-input" class="container">
      <input type="text" placeholder="enter your phone" />

      <div class="submit-container disabled">
        <button>
        <div class="spinner center">
          <div class="spinner-blade"></div>
          <div class="spinner-blade"></div>
          <div class="spinner-blade"></div>
          <div class="spinner-blade"></div>
          <div class="spinner-blade"></div>
          <div class="spinner-blade"></div>
          <div class="spinner-blade"></div>
          <div class="spinner-blade"></div>
          <div class="spinner-blade"></div>
          <div class="spinner-blade"></div>
          <div class="spinner-blade"></div>
          <div class="spinner-blade"></div>
        </div>
        <span>apply</span>
        </button>
      </div>
    </div>
  </div>

  <div class="input-field">
    <label>email</label>
    <div id="email-input" class="container">
      <input type="email" placeholder="enter your email" />
      <button>apply</button>
    </div>
  </div>

</div>

关于html - 一个窗体一个按钮和一个旋转加载器里面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68808293/

文章推荐： language-agnostic - 如何编写While循环

文章推荐： java - 多个类实现相同接口(interface)的问题

文章推荐： django - 在 Django Admin 中自定义一对一关系下拉菜单

文章推荐： javascript - @nestjs/swagger 没有设置授权 header

python - "Undecorate" turtle 窗
对于一个科学实验，我写了一个turtle.py ，它会打开一个 800x480 的窗口并绘制一个缓慢增长的黑点。 turtle.py以 C:\Users\kaza>python C:\Users\ka
java - 一次只打开一扇 Swing 窗
我开发了一个 swing 应用程序，但每次运行应用程序时都会打开一个新窗口。我希望如果一个窗口已经打开，则其他窗口不允许打开。最佳答案 Here是一个 Java 单一应用实例的例子: A singl
windows - Electron 窗 : architecture
有没有办法检测主进程中 Electron 的结构？ process.platform 似乎也在 x64 机器上返回 win32，我没有在文档中找到任何获取架构的选项。最佳答案你试过 process
java - 汉宁(von Hann)窗
public short[] HanningWindow(short[] signal_in ,int pos ,int size) { for (int i= pos; i < pos+si
javascript - 没有半径的 Electron 窗 Angular ？
我有一个具有这些属性的 Electron 窗口: mainWindow = new BrowserWindow({ width: 800, height: 600, title: "Aqu
windows - Knife 窗 : Network Error: getaddrinfo: Name or service not known (windows:22)
我有一个 Ubuntu 工作站，我正在尝试引导一个 Windows 节点。 Windows 节点在端口 2222 上打开了 ssh。我一直在关注 http://docs.opscode.com/plu

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 一个窗体一个按钮和一个旋转加载器里面