使用Bootstrap添加Loading效果

Bootstrap是一个开源的用于快速开发Web应用程序的前端框架，它提供了一系列的CSS样式和JavaScript插件，使开发者可以快速构建网页。Bootstrap中也可以添加Loading效果，以下是具体的使用方法：

1.使用Bootstrap的Spinner加载器

Bootstrap提供了一系列的Spinner加载器，可以用来显示加载的进度。要使用Spinner加载器，要引入Bootstrap的CSS文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

在页面上添加加载器：

<div class="loader">
  <div class="spinner">
    <div class="double-bounce1"></div>
    <div class="double-bounce2"></div>
  </div>
</div>

添加以下CSS样式：

.loader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fefefe;
  opacity: 0.9;
  z-index: 9999;
}
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  text-align: center;
}
.double-bounce1, .double-bounce2 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
  animation-delay: -1.0s;
}
@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0) 
  }
  50% { 
    transform: scale(1.0) 
  }
}

这样，就可以在页面上添加Loading效果了。

2.使用Bootstrap的Progress Bar

Bootstrap也提供了Progress Bar，可以用来显示加载的进度。要使用Progress Bar，要引入Bootstrap的CSS文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

在页面上添加Progress Bar：

<div class="loader">
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
      60%
    </div>
  </div>
</div>

添加以下CSS样式：

.loader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fefefe;
  opacity: 0.9;
  z-index: 9999;
}
.progress {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  text-align: center;
}

这样，就可以在页面上添加Progress Bar了。

3.使用Bootstrap的Overlay

Bootstrap还提供了Overlay，可以用来添加Loading效果。要使用Overlay，要引入Bootstrap的CSS文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

在页面上添加Overlay：

<div class="overlay">
  <div class="spinner">
    <div class="double-bounce1"></div>
    <div class="double-bounce2"></div>
  </div>
</div>

添加以下CSS样式：

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fefefe;
  opacity: 0.9;
  z-index: 9999;
}
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  text-align: center;
}
.double-bounce1, .double-bounce2 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
  animation-delay: -1.0s;
}
@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0) 
  }
  50% { 
    transform: scale(1.0) 
  }
}

这样，就可以在页面上添加Overlay了。

以上就是使用Bootstrap添加Loading效果的方法

本文链接：http://task.lmcjl.com/news/2786.html