Foundation progress bar
Foundation progress bar can be displayed as the degree of program processing:
We can use in the <div> element. The progress class is used to create progress bars, and the .meter class is used for child elements (<span>). We can set the progress percentage in the <span> element as follows:
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> </head> <body> <div style="padding:20px;"> <h2>基本进度条</h2> <div class="progress"> <span class="meter" style="width:70%"></span> </div> </div> </body> </html>
Running Instance»
Click the "Run Instance" button to view the online instance
Progress bar color
By default, the progress bar color is blue. Classes with different colors are: .secondary, .success, or .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> </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>
Run instance»
Click the "Run instance" button to view the online instance
Rounded corner progress bar
The .radius and .round classes are used to add rounded corners to the progress bar:
Example
<!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>
Run instance»
Click the "Run instance" button to view the online instance
Progress bar size
You can use .small -num or .large-num to modify the width of the progress bar, num is a number between 1(8.33% ) and 12(default (100%)):
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> </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»
Click" Run instance" button to view the online instance
Progress bar label
You can use CSS to add labels to the progress bar. In the following example we added <span> Element to display the percentage:
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>Run Instance»
Click the "Run Instance" button to view the online instance
