增加装载机的尺寸

Question

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

HTML & CSS:

​

.loading-directive {
    position:relative;
    clear:both;
    top: 37px
}

.loading-directive .loader {
    position:relative;
    margin:0 auto;
    width:65px;
    height:64px;
    zoom:1;
}

.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
      }
}

<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>

​

问题中的加载程序：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);
}

见下面的片段

​

.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
  }
}

<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>

​