Foundation Progress Bars – Show Progress With Style

foundation-progress-bars

Foundation Progress Bars can easily be added to content with only two Html elements. Easily show off your skill set or progress on a project to visitors. By definition, progress bars “are a component in a graphical user interface used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation.” In the world of web development though, developers use progress bars to show the progress of a particular project or to show the level of competency regarding a certain skill set or program, i.e. Photoshop or PHP. Foundation has included its own CSS component called Foundation Progress Bars and they are easy to implement and use with WP-Forge and WP-Starter.

Foundation Progress Bars Example

In the following examples I will show you how you can add Foundation Progress Bars to your content with ease. Remember, you need to click on the “text” tab in the post/page editor to add the necessary code where you want it.

This is what a regular progress bar looks like. I set the width of this progress bar to 20%:

Here is the code I used to add the bar to the content:

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

Please take note that there are two elements that need to be included. The first element is the .div with the .progress class assigned to it. The second element is a span container inside of the first element with a .meter class assigned to it. As you can see the span container has its own width inline CSS. You change this value to reflect the width of the meter. You can use 0-100%

You can also change the look of the Foundation Progress Bars:

The following is a regular progress bar set to 20%

The following is a progress bar with the .success class added and set to 40%

The following is a progress bar with the .alert class added and set to 60%

The following is a progress bar with the .secondary class added and set to 80%

Here is the code I used for the Foundation Progress Bars above:

<div class="progress"><span class="meter" style="width: 20%"></span></div>
 
<div class="progress success"><span class="meter" style="width: 40%"></span></div>
 
<div class="progress alert"><span class="meter" style="width: 60%"></span></div>
 
<div class="progress secondary"><span class="meter" style="width: 80%"></span></div>

You can also change the appearance of the edges of the Foundation Progress Bars by adding an additional class to the .progress div. You can add either .radius or .round:

Progress bar with the .radius class added. Width set to 20%. The edges should have a slightly rounded appearance.

Progress bar with the .round class added. Width set to 40%. The edges should have a very rounded appearance.

Here is the code I used for the Foundation Progress Bars example above:

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

Adding Foundation Progress Bars to your content is super easy. You can use them for just about anything you can imagine. You can use them to show the latest progress on a long awaited theme or you can let everyone know how good you are with a particular program or platform. Whatever the case may be, I would be interested in how you would use Foundation Progress Bars on your site or in your projects.

Read more Foundation Docs: Progress Bars

2 thoughts on “Foundation Progress Bars – Show Progress With Style

Leave a Comment