阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Foundation 进度条

    Foundation 进度条

    Foundation 进度条可以作为程序处理的程度来显示:

    我们可以在 <div> 元素中使用 .progress 类来创建进度条, .meter 类用于子元素(<span>)。我们可以在 <span> 元素中设置进度百分比,如下所示:

    <div class="progress">
      <span class="meter" style="width:70%"></span>
    </div>
    

    进度条颜色

    默认情况下,进度条颜色为蓝色。不同颜色的类为:.secondary, .success, 或 .alert:

    <div class="progress">
      <span class="meter" style="width:50%"></span>
    </div>
    
    <div class="progress secondary">
      <span class="meter" style="width:50%"></span>
    </div>
    
    <div class="progress success">
      <span class="meter" style="width:50%"></span>
    </div>
    
    <div class="progress alert">
      <span class="meter" style="width:50%"></span>
    </div>
    

    圆角进度条

    .radius.round 类用于为进度条添加圆角效果:

    <div class="progress">
      <span class="meter" style="width:50%"></span>
    </div>
    
    <div class="progress radius">
      <span class="meter" style="width:50%"></span>
    </div>
    
    <div class="progress round">
      <span class="meter" style="width:50%"></span>
    </div>
    

    进度条尺寸

    可以使用 .small-_num_.large-_num_ 来修改进度条的宽度, num 是一个数字在 1(8.33%) 和 12(default (100%)) 之间:

    <div class="progress large-1">
      <span class="meter" style="width:50%"></span>
    </div>
    
    <div class="progress large-6">
      <span class="meter" style="width:50%"></span>
    </div>
    
    <div class="progress large-9">
      <span class="meter" style="width:50%"></span>
    </div>
    
    <div class="progress large-11">
      <span class="meter" style="width:50%"></span>
    </div>
    
    <!-- Default width -->
    <div class="progress large-12">
      <span class="meter" style="width:50%"></span>
    </div>
    

    进度条标签

    可以使用 CSS 为进度条添加标签。以下实例中我们添加了 <span> 元素来显示百分比:

     <style>
    .percentage {
      position: absolute;
      top: 50%;
      left: 50%;
      color: white; 
      transform: translate(-50%, -50%);
      font-size: 12px;
    }
    </style>
    
    <div class="progress">
      <span class="meter" style="position:relative;width:75%">
        <span class="percentage">75%</span>
      </span>
    </div>
    
    <div class="progress success">
      <span class="meter" style="position:relative;width:50%">
        <span class="percentage">50%</span>
      </span>
    </div>
    
    <div class="progress alert">
      <span class="meter" style="position:relative;width:25%">
        <span class="percentage">25%</span>
      </span>
    </div>
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录