<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress and Meter</title>
<style>
body {
  font-family: 'Palatino Linotype', serif;
}

h1 {
  font-size: x-large;
  margin-top: 20px;
  margin-bottom: 0px;
}

p {
  margin: 2px;
}

.separatedSection {
  margin-top: 20px;
}
</style>
</head>
<body>

<h1>Progress Bars</h1>
Current progress: <progress max=100 value=50>50%</progress><br>
Current progress: <progress>Task in progress...</progress>

<h1>Meters</h1>
Your suitcase weighs: <meter min="5" max="70" value="28">28 pounds</meter><br>
Your suitcase weighs: <meter min="5" max="100" high="70" value="79">79 pounds</meter>*
<p><small>* A surcharge applies to suitcases heavier than 70 pounds.</small></p>
<div class="separatedSection">
<p>Our goal is to raise $50,000 for SLF (Save the Lemmings Foundation).</p>
<p>So far we've raised $14,000. <meter max="50000" value="14000"></meter></p>
</div>
</body>
</html>