Twitter bootstrap 为twitter引导缩略图加载图像时使用微调器？

当用户通过PHP剪辑一段视频时，我们会动态生成缩略图

为了做到这一点，我们通过ajax向服务器发送了一些信息，它调用ffmpeg生成缩略图，然后在生成缩略图时最终返回给我们，这样我们就可以使用twitter引导的缩略图在视频剪辑器下面显示

下面是用户在等待缩略图时看到的基本示例：

显然不好，看起来很乱。因此，我们希望微调器在水平和垂直方向上居中，并且可以缩放，因为缩略图是有响应的，所以我们需要微调器能够增长

这只是基本的htmt，但显然我需要在这里包含代码：

<div class="container-fluid">
<div class="row-fluid">
    <div class="span12">
        <ul class="thumbnails">
            <li class="span2"><a href="#" class="thumbnail">
                    <i class="icon icon-spin icon-spinner"></i>
                </a>

            </li>
            <li class="span2"><a href="#" class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </a>

            </li>
            <li class="span2"><a href="#" class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </a>

            </li>
            <li class="span2"><a href="#" class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </a>

            </li>
            <li class="span2"><a href="#" class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </a>

            </li>
            <li class="span2"><a href="#" class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </a>

            </li>
            <li class="span2"><a href="#" class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </a>

            </li>
            <li class="span2"><a href="#" class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </a>

            </li>
            <li class="span2"><a href="#" class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </a>

            </li>
        </ul>
    </div>
</div>
</div>