Delto Delto - 1 month ago 12
CSS Question

Increasing a material loader's size

I have a material loader, and I'm having difficulties figuring out how to enlarge the animation.

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>





Loader in question:
https://jsfiddle.net/012k581h/

I need the loader to be 25% larger than displayed here. What properties must be adjusted to achieve this?

Answer

You can use the the scale property using css

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

See snippet below

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