기초 진행 표시줄


Foundation 진행률 표시줄은 프로그램 처리 정도에 따라 표시될 수 있습니다.

<div> 요소의 .progress 클래스를 사용하여 진행률 표시줄, .meter 클래스는 하위 요소(<span>)에 사용됩니다. 다음과 같이 <span> 요소에서 진행률을 설정할 수 있습니다. <div> 元素中使用 .progress 类来创建进度条，.meter 类用于子元素(<span>)。我们可以在 <span> 元素中设置进度百分比，如下所示：

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>基本进度条</h2>
  <div class="progress">
    <span class="meter" style="width:70%"></span>
  </div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

进度条颜色

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

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>进度条颜色</h2>
  <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>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

圆角进度条

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

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>圆角进度条</h2>
  <p>默认:</p>
  <div class="progress">
    <span class="meter" style="width:50%"></span>
  </div>

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

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

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

进度条尺寸

可以使用 .small-num 或 .large-numInstance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>进度条尺寸</h2>
  <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, if you remove .large-12 it will produce the same result -->
  <div class="progress large-12">
    <span class="meter" style="width:50%"></span>
  </div>
</div>

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

진행률 표시줄 색상
기본적으로 진행률 표시줄 색상은 파란색입니다. 다양한 색상의 클래스는 .secondary, .success 또는 .alert입니다.

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
<style>
  .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    color: white; 
    transform: translate(-50%, -50%);
    font-size: 12px;
  }
  </style>
</head>
<body>

<div style="padding:20px;">
  <h2>进度条标签</h2>
  <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>
</div>

</body>
</html>

Running Instance »

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

둥근 모서리 진행률 표시줄
🎜.radius 및 .round 클래스는 둥근 모서리를 추가하는 데 사용됩니다. 진행률 표시줄에 코너 효과 적용: 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.🎜🎜🎜🎜진행률 표시줄 크기🎜🎜<코드>를 사용할 수 있습니다. small-🎜num🎜 또는 .large-🎜num🎜은 진행률 표시줄의 너비를 수정합니다. 🎜num🎜은 1(8.33%)에서 12(기본값(100)) 사이의 숫자입니다. %)): 🎜🎜🎜예🎜🎜 rrreee🎜🎜🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.🎜🎜🎜🎜진행 표시줄 라벨🎜🎜 CSS를 사용하여 진행 상황에 라벨을 추가할 수 있습니다. 술집. 다음 예에서는 <span> 백분율을 표시하는 요소: 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행 »🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜