增加材料装载机的尺寸

Question

我有一个材料加载器，我很难弄清楚如何放大动画。

HTML＆amp; CSS：

<div class="loading-directive" id="product-image-container" style="display: block;">
  <div class="loader">
    <svg class="circular">
    <circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4">
    </circle>
    </svg>
  </div>
</div>

{{1}}

有问题的装载机： https://jsfiddle.net/012k581h/

我需要加载器比此处显示的大25％。必须调整哪些属性才能实现此目的？

Answer 1

您可以使用css

来使用scale属性

.loading-directive .loader {
  position: relative;
  margin: 0 auto;
  width: 65px;
  height: 64px;
  zoom: 1;
  transform: scale(1.5, 1.5);
  -webkit-transform: scale(1.5, 1.5);
  -moz-transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -o-transform: scale(1.5, 1.5);
}

请参阅下面的代码段

＆＃13;

＆＃13;

.loading-directive {
  position: relative;
  clear: both;
  top: 37px
}
.loading-directive .loader {
  position: relative;
  margin: 0 auto;
  width: 65px;
  height: 64px;
  zoom: 1;
  transform: scale(1.5, 1.5);
  -webkit-transform: scale(1.5, 1.5);
  -moz-transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -o-transform: scale(1.5, 1.5);
}
.loading-directive .circular {
  -webkit-animation: loadingrotate 2s linear infinite;
  animation: loadingrotate 2s linear infinite;
  height: 64px;
  position: relative;
  width: 65px
}
.loading-directive .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: loadingdash 1.5s ease-in-out infinite;
  animation: loadingdash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  stroke: #333333;
}
@-webkit-keyframes loadingrotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}
@keyframes loadingrotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}
@-webkit-keyframes loadingdash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0
  }
  50% {
    stroke-dasharray: 150, 200;
    stroke-dashoffset: -50
  }
  100% {
    stroke-dasharray: 150, 200;
    stroke-dashoffset: -185
  }
}
@keyframes loadingdash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0
  }
  50% {
    stroke-dasharray: 150, 200;
    stroke-dashoffset: -50
  }
  100% {
    stroke-dasharray: 150, 200;
    stroke-dashoffset: -185
  }
}

＆＃13;

<div class="loading-directive" id="product-image-container" style="display: block;">
  <div class="loader">
    <svg class="circular">
      <circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4">
      </circle>
    </svg>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;