Javascript 如何通过改变css的高度和宽度来制作小的加载循环？

我有一个加载循环，但大小太大，我想把它变小，但我找不到一个方法来做到这一点

我正在使用下面的HTML和CSS创建加载循环

<div style="position: absolute; top: -5px; opacity: 0.25; animation: opacity-60-25-2-13 1s linear infinite;">
    <div style="position: absolute; width: 30px; height: 10px; box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; transform-origin: left 50% 0px; transform: rotate(55deg) translate(30px, 0px); border-radius: 5px; background: rgb(0, 0, 0);"></div>
</div>

尝试对加载圆div使用transform:scale0.67。它会将div缩小到原始大小

您可以根据需要更改比例值

div{
-webkit-transform: scale(0.67);
       -moz-transform: scale(0.67);
            transform: scale(0.67);
}

尝试对加载圆div使用transform:scale0.67。它会将div缩小到原始大小

您可以根据需要更改比例值

div{
-webkit-transform: scale(0.67);
       -moz-transform: scale(0.67);
            transform: scale(0.67);
}

---

如果使用的是spin.js，请尝试更改选项值以减小微调器的大小：

var opts = {
  lines: 10 // The number of lines to draw
, length: 9 // The length of each line
, width: 5 // The line thickness
, radius: 5 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}
var target = document.getElementById('spin')
var spinner = new Spinner(opts).spin(target);

---

如果使用的是spin.js，请尝试更改选项值以减小微调器的大小：

var opts = {
  lines: 10 // The number of lines to draw
, length: 9 // The length of each line
, width: 5 // The line thickness
, radius: 5 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}
var target = document.getElementById('spin')
var spinner = new Spinner(opts).spin(target);

---

为什么不能使用简单的gif作为微调器呢？这里没有足够的html来生成加载循环。请提供一个jsfiddle，您看到过令人敬畏的图标吗？fortawesome.github.io/Font-Awesome/examplesanimated您能发布工作小提琴吗？此代码不会给出您提到的加载循环要使用自定义HTML和CSS来加载效果，您可能还需要使用CSS3动画。但是要让它像实时一样工作，你必须应用一些JS。为什么不能使用简单的gif作为微调器呢？这里没有足够的html来生成你的加载循环。请提供一个jsfiddle，您看到过令人敬畏的图标吗？fortawesome.github.io/Font-Awesome/examplesanimated您能发布工作小提琴吗？此代码不会给出您提到的加载循环要使用自定义HTML和CSS来加载效果，您可能还需要使用CSS3动画。但是要让它像实时一样工作，你必须应用一些js。非常感谢，但是我如何在上面的代码中对我的js:进行更改呢？这将是很大的帮助。非常感谢，但是我如何在上面的代码中对我的js:进行更改呢？这将是很大的帮助。