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

Question

我有一个加载圈，但尺寸太大，我想让它变小，但我找不到办法做到这一点。

我正在使用下面的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>

spin.js

function SpinStart()
{
    var opts = {
        lines: 13, // The number of lines to draw
        length: 20, // The length of each line
        width: 10, // The line thickness
        radius: 30, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 0, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1, // Rounds per second
        trail: 60, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'spinner', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent
        left: '50%' // Left position relative to parent
    };
    var target = document.getElementById('spinner');
     spinner = new Spinner(opts).spin(target);
}

Answer 1

如果您正在使用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);

Answer 2

尝试使用transform:scale(0.67)加载圈div。它会将你的div缩小到原始大小。

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

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

Demo here