登录
2023-05-12 开启多语言插件支持……
> 技术流 > 前端开发 > Css > 如何用纯CSS3制作进度条

如何用纯CSS3制作进度条

Css 苏 demo 2462℃ 0评论

进度条经常运用于网页，即使我们意识到不是所有的东西都将瞬间被加载完成，这些进度条用于提醒使用者关于网页上具体的任务进程，譬如上传，下载，加载应用程序等。

以前如果想要创建一个进度条的动画效果，没有使用JavaScript是不可能实现的。然而感谢CSS3的出现，我们现在能够在 div 里执行动画，添加梯度和彩色元素。事实上，HTML5为实现此目的也创建了一个特殊的进度条元素。 当你看完这个教程，你将会知道怎样使用纯CSS创建一个有平面动画效果的进度条：无需Flash，无需图片，无需JavaScript。

让我们开始吧…

标签

我们应该写一个样式为 .container 的 div 用来包含我们的进度条，其次是用样式为 .title 的 div 来包裹我们的标题。

接下来，我们将添加样式为 .bar 的 div 来包含填充和未填充的进度条样式。最后，我们将在 .bar 里添加样式为 .bar-unfill 和 .bar-fill 的 span 标签。

<div class="container">
  <div class="title plain">Plain</div>
  <div class="bar">
    <span class="bar-unfill">
      <span class="bar-fill"></span>
    </span>
   </div>
</div>

简单的进度条的CSS代码

.container 类里将 width 定义为 30% 使进度条能够自适应。我们也将放一些简单的 border-radius 之类的属性在我们的 .title 类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。

.container {
  width:30%;
  margin:0 auto
}
.title {
  background:#545965;
  color:#fff;
  padding:15px;
  float:left;
  position:relative;
  -webkit-border-top-left-radius:5px;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-bottomleft:5px;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px
}

现在让我们来写未填充的的样式，首先给他一个白色的背景。

.bar-unfill {
  height:15px;
  display:block;
  background:#fff;
  width:100%;
  border-radius:8px
}

接下来，我们将定义进度条的样式，先令他的宽度为 100% ，因为这也会应用于定义和未定义的部分。所以在我们的 .bar-fill 的类里，我们将令他的宽度为 0 作为起始的宽度，添加CSS3的 transition 属性使我们的动画效果更加流畅，最后，我们将添加CSS3里的 animation 属性，定义动画的名字，和 duration 和 animation-iteration-count 属性。

.bar-fill {
  height:15px;
  display:block;
  background:#45c9a5;
  width:0;
  border-radius:8px;
  -webkit-transition:width .8s ease;
  -moz-transition:width .8s ease;
  transition:width .8s ease;
  -webkit-animation:progressbar 7s infinite;
  animation:progressbar 7s infinite
}

制作这个动画，我们将使用CSS3里的 @keyframe 规则来设置宽度从 0 变化到 100% 。你也能定制你自己喜欢的变化。

/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar { 
  from {
    width:0
  }
  to {
    width:100%
  }
}
/* Standard syntax */
@keyframes progressbar {
  from {
    width:0
  }
  to {
    width:100%
  }
}

条纹进度条

若要制作一个条纹进度条，我们应该把 .bar-fill 重新命名为 .bar-fill-stripes 。我们将使用 backgrou-image 属性里的 linear-gradient 同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：

.bar-fill-stripes {
  height:15px;
  display:block;
  background:#e74c3c;
  width:0;
  border-radius:8px;
  background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2)	   50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
  -webkit-transition:width .8s ease;
  -moz-transition:width .8s ease;
  transition:width .8s ease;
  -webkit-animation:progressbar 7s infinite;
  animation:progressbar 7s infinite
}

有追踪器的进度条

本教程的这部分，我们将为我们的进度条创建一个跟踪器，所以我们将调整一下我们的HTML标签和CSS部分，观察下面的标签。

<div class="container">
  <div class="title">Tracker</div>
  <div class="bar">
    <span class="bar-unfill">
      <span class="bar-fill-tracker"></span>
      <span class="track-wrap">
        <span class="track"></span>
      </span>
    </span>
  </div>
</div>

正如你所看到的那样，我们往类名为 .bar-unfill 的 div 里添加了一个类名为.track-weap 的 span 标签。他将包裹我们整个追踪器，然后使用另一个 @keyframe 规则来产生动画效果，让我们一起写一下 .track-wrap 和 .track 的样式吧。

.track-wrap {
  position:relative;
  top:-18px;
  -webkit-animation:progressbar2 7s infinite;
  animation:progressbar2 7s infinite
}
.track {
  height:20px;
  display:block;
  background:#e74c3c;
  width:20px;
  border-radius:10px;
  position:relative;
  left:-12px
}
/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar2 {
  from {
    left:0
  }
  to {
    left:100%
  }
}
/* Standard syntax */
@keyframes progressbar2 {
  from {
    left:0
  }
  to {
    left:100%
  }
}

正如上面所示，我在 .track-wrap 类里设置了 position 为 relative ， top改为 -18px ，然后设置一个 animation 属性。接下来，我设置了追踪器的 .track 类，并且设置 border-radius 为 10px ， left 为 -12px 。另一方面我也通过重新命名为 progressbar2 的 @kyframe 添加了动画效果。

HTML5 的进度条

在我们之前的例子里，我们都是使用 div 来创建一个进度条，但是这次我们将研究如何使用HTML5的进度条。

基础标签

HTML5进度条元素可以通过 <progress> 标签被添加，在这个标签里面，我们可以设置进度条的各种参数，如 value 、 min 、 max 等属性。请观察下面的基础标签。

<progress value="50" max="100"></progress>

现在将这些元素排成一列，我们可以用上述的便签将这些代码包裹起来，请看下面的代码。

<div class="title html5">HTML5</div>
<div class="bar">
    <span class="bar-unfill">
        <progress value="50" max="100"></progress>
    </span>
</div>

没有什么特别之处，我们只是改变了类名为 bar-fill 的 span 标签里的进度条标签。现在让我们试试HTML5的进度条。

progress, progress::-webkit-progress-bar{
  height:15px;
  display:block;
  background-color:#8e44ad;
  width:0;
  -webkit-border-radius: 8px;
  border-radius:8px;
  color: #fff;
  -webkit-transition:width .8s ease;
  -moz-transition:width .8s ease;
  transition:width .8s ease;
  -webkit-animation:progressbar 7s infinite;
  animation:progressbar 7s infinite
}
progress::-moz-progress-bar {
  height:15px;
  display:block;
  background-color:#8e44ad;
  width:0;
  -webkit-border-radius: 8px;
  border-radius:8px;
  color: #fff;
  -webkit-transition:width .8s ease;
  -moz-transition:width .8s ease;
  transition:width .8s ease;
  -webkit-animation:progressbar 7s infinite;
  animation:progressbar 7s infinite
  }

改变进度条的样式，我们需要添加Webkit和Mozilla的伪类，使谷歌浏览器和火狐浏览器兼容。

progress::-webkit-progress-bar {
    /* style rules for Chrome */
}
progress::-moz-progress-bar {
    /* style rules for Firefox*/
}

为了完成HTML5进度条的设计，我想出了下面的CSS。

progress::-webkit-progress-bar{
  height:15px;
  display:block;
  background-color:#8e44ad;
  width:0;
  -webkit-border-radius: 8px;
  border-radius:8px;
  color: #fff;
  -webkit-transition:width .8s ease;
  -moz-transition:width .8s ease;
  transition:width .8s ease;
  -webkit-animation:progressbar 7s infinite;
  animation:progressbar 7s infinite
}
progress::-moz-progress-bar {
  height:15px;
  display:block;
  background-color:#8e44ad;
  width:0;
  -webkit-border-radius: 8px;
  border-radius:8px;
  color: #fff;
  -webkit-transition:width .8s ease;
  -moz-transition:width .8s ease;
  transition:width .8s ease;
  -webkit-animation:progressbar 7s infinite;
  animation:progressbar 7s infinite
}

 

打赏

转载请注明：苏demo的别样人生 » 如何用纯CSS3制作进度条

   如果本篇文章对您有帮助，欢迎向博主进行赞助，赞助时请写上您的用户名。

   支付宝直接捐助帐号oracle_lee@qq.com 感谢支持！
喜欢 (0)or分享 (0)