Question

我有以下HTML代码，但我想用一个gif代替progess bar。

<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>

Answer 1

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

<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"/>

那不是一个随机的GIF！它确实显示了某些内容正在加载：）

Answer 2

您可以通过多种方式实现这一目标：

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

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

Answer 3

<div class="modal-body">
  <div id='progressBar' style='display:none;'>
   <img src='http://www.barchart.com/shared/images/progress_bar.gif'/>
  </div>
</div>

你可以使用jQuery的hide和show

例如：

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

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

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

3 个答案: