如何在html中使用GIF图像而不是进度条？

我有下面的html代码，但是我想用gif代替进度条

<div class="modal fade" id="waitDialog" >
    <div class="modal-header">
        <h1>Processing...</h1>
    </div>
    <div class="modal-body">
        <div class="progress progress-striped active">
             <div class="bar" style="width: 100%;"></div>
        </div>
    </div>
</div>

---

我想知道是什么阻止了你使用

<img src="path/to/image.gif"/>

而不是

<div class="progress progress-striped active">
    <div class="bar" style="width: 100%;"></div>
</div>

试试这个，例如：

<img src="http://bit.ly/1GIHgLh"/>

$("#progressBar").css('display','block');

$("#progressBar").css('display','none');

---

那不是随机的GIF！它确实表明有东西正在加载：

您可以通过几种方式来实现这一点：

一种方法是将gif图像作为背景图像添加到CSS文件中：

.progress .progress-striped active{
    background-image: url("path/to/image.gif");
    background-repeat: no-repeat;
}

$("#progressBar").css('display','block');

$("#progressBar").css('display','none');