Javascript 进度条的动画_Javascript_Css

Javascript 进度条的动画

javascript css

Javascript 进度条的动画,javascript,css,Javascript,Css,我正在制作一个进度条： <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="styleshee

我正在制作一个进度条：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>


引导示例
动画进度条
.active类为进度条设置动画：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>

40%

上述代码（）返回一个进度条，如下所示：

然而，我不喜欢这个动画（它的方向让人感到压抑）。我更喜欢这样的东西（感觉向前走）：

有人知道哪个类启用了它吗？

我刚刚复制了带有

.progress bar

样式的行，并反转了方向

换句话说，只需将

线性梯度

方向从现在的角度（

45度

）更改为

-45度

）

也可以随意添加其他供应商前缀。为了简单起见，我只加入了

-webkit-

.progress-bar.progress-bar-striped.active{
背景图像：-webkit线性渐变（-45度，rgba（255，255，255，.15）25%，透明25%，透明50%，rgba（255，255，255，.15）50%，rgba（255，255，255，.15）75%，透明75%，透明）；
}


动画进度条
.active类为进度条设置动画：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>

40%

我刚刚复制了带有

.progress bar

样式的行，并反转了方向

换句话说，只需将

线性梯度

方向从现在的角度（

45度

）更改为

-45度

）

也可以随意添加其他供应商前缀。为了简单起见，我只加入了

-webkit-

.progress-bar.progress-bar-striped.active{
背景图像：-webkit线性渐变（-45度，rgba（255，255，255，.15）25%，透明25%，透明50%，rgba（255，255，255，.15）50%，rgba（255，255，255，.15）75%，透明75%，透明）；
}


动画进度条
.active类为进度条设置动画：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>

40%

更新

Bootstarp

类

.progress bar striped.progress striped.progress bar

.progress-bar-striped, .progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(134deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(134deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(134deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

更新

Bootstarp

类

。进度条分条。进度条分条。进度条

.progress-bar-striped, .progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(134deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(134deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(134deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}

那是你想要的吗

。进度条分条，。进度条分条。进度条{
背景图像：线性渐变（-45度，rgba（255，255，255，0.14902）25%，透明25%，透明50%，rgba（255，255，255，255，0.14902）50%，rgba（255，255，255，0.14902）75%，透明75%，透明）！重要信息；
背景尺寸：40px 40px；
}


动画进度条
.active类为进度条设置动画：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>

40%

这是你想要的吗

。进度条分条，。进度条分条。进度条{
背景图像：线性渐变（-45度，rgba（255，255，255，0.14902）25%，透明25%，透明50%，rgba（255，255，255，255，0.14902）50%，rgba（255，255，255，0.14902）75%，透明75%，透明）！重要信息；
背景尺寸：40px 40px；
}


动画进度条
.active类为进度条设置动画：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>

40%

我想你想要的是改变背景图像的角度，并从左到右设置线条的动画。您可以通过添加以下两条规则来实现这一点：

.container .progress-bar.active, .progress.active .progress-bar {
  animation-direction: reverse;
}
.progress-bar.active, .progress.active .progress-bar {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)
}

.container.progress-bar.active，
.progress.active.进度条{
动画方向：反向；
}
.progress-bar.active，
.progress.active.进度条{
背景图像：线性渐变（135度，rgba（255，255，255，.15）25%，透明25%，透明50%，rgba（255，255，255，.15）50%，rgba（255，255，255，.15）75%，透明75%，透明）
}


引导示例
动画进度条
.active类为进度条设置动画：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>

40%

我想你想要的是改变背景图像的角度，并从左到右设置线条的动画。您可以通过添加以下两条规则来实现这一点：

.container .progress-bar.active, .progress.active .progress-bar {
  animation-direction: reverse;
}
.progress-bar.active, .progress.active .progress-bar {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)
}

.container.progress-bar.active，
.progress.active.进度条{
动画方向：反向；
}
.progress-bar.active，
.progress.active.进度条{
背景图像：线性渐变（135度，rgba（255，255，255，.15）25%，透明25%，透明50%，rgba（255，255，255，.15）50%，rgba（255，255，255，.15）75%，透明75%，透明）
}


引导示例
动画进度条
.active类为进度条设置动画：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>

40%

您指的是直线的角度/倾斜度吗？是的，是直线的角度/倾斜度。您指的是直线的角度/倾斜度吗？是的，线条的角度/倾斜。

.progress striped.progress bar

与任何内容都不匹配。我是从chrome developer工具复制的。

.progress striped.progress bar

与任何内容都不匹配。我是从chrome developer工具复制的。您的解决方案就是我想要的。。。你知道如何停止动画（即不要让它移动）吗？我想在流程100%完成后停止它。另一个选项是使整个条形图具有相同的颜色

rgba（255、255、255、15）

一次为100%。您的解决方案就是我想要的。。。你知道如何停止动画（即不要让它移动）吗？我想在流程100%完成后停止它。另一个选项是使整个条形图具有相同的颜色

rgba（255、255、255、.15）

一次为100%。