html - 控制旋转加载图标的大小

Question

再次感谢任何能帮助我解决这个看似简单的问题的人!我只是无法弄清楚我的生活。我正在创建一个包含两个区域的注册页面。我希望这些输入区域与检查数据库时出现的图标一致。

我已经设置好一切，我认为我的 html 是正确的。我创建了一行，其中包含输入框和我从互联网上获得的 whirly loader。唯一的问题是当我运行它时，whirly loader 太大并且与输入框不完全一致。

这是我的 html:

<div class="row">
    <div class="col-xs-10">
    <input type="text" class="form-control" id="usernameOrEmail" placeholder="Shattr Username or Email">
        <label id = "usernameLabel"></label>
    </div>

        <div class="col-xs-2">  


            <div class="whirly-loader" id="usernameSpinner" style="display: none;">Loading...</div> 

    </div>
</div>

然后我进入并指向“whirly-loader”类，但无论我将宽度和高度设置为什么，都没有任何变化。这可能是一个太奇怪的问题，但如果有人有任何建议会很棒。这是我的 CSS:

 .whirly-loader{

 height:10%;
 width:10%;

  }

Answer 1

您的动画图标设置为 whirly-loader 选择器的背景？如果是，则只需添加 background-size: cover，它应该适合定义的高度和宽度。

顺便说一句。总是粘贴你的 fiddle 。更容易提供帮助。