Foundation also comes with progress bars. Let's try them out and put them inside the same div as the table and video. On or around line 313, let's insert this code:
<div class="progress"> <span class="meter"></span> </div>
It looks fancy, doesn't it? We have a blue progress bar that is 100 percent complete. If you want to try and see the progress bar, say 60 percent complete, you can add a style
tag to your span and set it to a 60 percent width, as shown in the following code:
<div class="progress"> <span class="meter" style="width: 60%"></span> </div>
Like a lot of Foundation elements, you can add secondary
, alert
, success
, radius
, and round
after progress
. Go ahead and try them out.