<section> : The Section Element
Summary
The <section> element represents a thematic grouping of content, typically with a heading. It is a semantic block-level element used to divide documents into logical sections, chapters, or themed content areas.
Usage
The <section> element creates a semantic container that:
- Represents a thematic section of content with a specific purpose or topic
- Takes full width of its parent container by default
- Has a default page break before behavior (starts on a new page by default)
- Supports nested
<header>and<footer>elements for structured content - Can generate PDF bookmarks/outlines when a
titleattribute is set - Automatically arranges header and footer elements at the top and bottom
- Supports all CSS styling properties for positioning, sizing, colors, borders, and backgrounds
- Ideal for document chapters, major divisions, and thematic groupings
<section title="Introduction">
<header>
<h1>Introduction</h1>
</header>
<p>This section introduces the main concepts...</p>
<footer>
<p>End of introduction</p>
</footer>
</section>
Supported Attributes
Standard HTML Attributes
| Attribute | Type | Description |
|---|---|---|
id |
string | Unique identifier for the element. Used for styling and internal references. |
class |
string | CSS class name(s) for styling. Multiple classes separated by spaces. |
style |
string | Inline CSS styles applied directly to the element. |
title |
string | Sets the outline/bookmark title in the PDF document. Sections with titles appear in PDF bookmarks. |
hidden |
string | Controls visibility. Set to “hidden” to hide the element, or omit/empty to show. |
Data Binding Attributes
| Attribute | Type | Description |
|---|---|---|
data-bind |
expression | Binds the element to a data context for use with templates. |
data-content |
expression | Dynamically sets the content of the section from bound data. |
CSS Style Support
The <section> element supports extensive CSS styling through the style attribute or CSS classes:
Box Model:
width,height,min-width,max-width,min-height,max-heightmargin,margin-top,margin-right,margin-bottom,margin-leftpadding,padding-top,padding-right,padding-bottom,padding-leftborder,border-width,border-color,border-styleborder-top,border-right,border-bottom,border-left
Positioning:
position:static,relative,absolutedisplay:block,inline,inline-block,nonefloat:left,right,noneclear:both,left,right,nonetop,left,right,bottom(for positioned elements)
Layout:
overflow:visible,hidden,clipcolumn-count,column-width,column-gap(multi-column layout)page-break-before,page-break-after,page-break-inside
Visual Styling:
background,background-color,background-imagebackground-position,background-size,background-repeatcolor(text color)opacitytransform(rotation, scaling, translation)
Typography (inherited by child text):
font-family,font-size,font-weight,font-styletext-align,text-decoration,text-transformline-height,letter-spacing,word-spacing
Notes
Semantic Meaning and Purpose
The <section> element provides semantic meaning to your document structure:
- Thematic Grouping: Use
<section>for content that belongs together thematically - chapters, tabbed content, numbered sections of a thesis - Heading Association: Each section typically has a heading (h1-h6) that describes its theme
- Document Outline: Sections create a hierarchical structure in your document
- PDF Chapters: Perfect for creating chapter divisions in multi-section documents
When to Use Section vs. Article vs. Div
Use <section> when:
- You have a thematic grouping of content with a specific topic or purpose
- You want to create document chapters or major divisions
- The content needs a descriptive heading
- You want automatic page breaks between major document divisions
- You’re creating structured documents with clear thematic sections
Use <article> when:
- The content is self-contained and independently distributable
- The content could be syndicated or reused as a standalone piece
Use <div> when:
- You need a generic container for styling or layout purposes
- The content grouping has no semantic meaning
- You’re creating purely presentational groupings
Default Page Break Behavior
IMPORTANT: The <section> element has a default page-break-before: true style. This means:
- Each section starts on a new page by default
- This is ideal for document chapters and major divisions
- You can override this behavior with CSS:
<!-- Starts on new page (default) -->
<section>
<h1>Chapter 1</h1>
</section>
<!-- No page break before -->
<section style="page-break-before: auto;">
<h2>Subsection 1.1</h2>
</section>
Header and Footer Arrangement
The <section> element automatically arranges <header> and <footer> elements:
- All
<header>elements are moved to the top of the section (in order they appear) - All
<footer>elements are moved to the bottom of the section (in order they appear) - This arrangement happens during the pre-layout phase
- Other content remains in its original position between headers and footers
<section>
<p>Some content</p>
<header>This moves to top</header>
<p>More content</p>
<footer>This moves to bottom</footer>
<p>Even more content</p>
</section>
<!-- Rendered order:
1. header
2. Some content
3. More content
4. Even more content
5. footer
-->
PDF Bookmarks and Outlines
When you add a title attribute to a <section>, it creates an entry in the PDF document outline:
<section title="Chapter 1: Introduction">
<h1>Introduction</h1>
<!-- Section content -->
</section>
<section title="Chapter 2: Getting Started">
<h1>Getting Started</h1>
<!-- Section content -->
</section>
This creates clickable bookmarks in PDF readers that allow users to navigate directly to each section. Nested sections create hierarchical bookmarks.
Class Hierarchy
In the Scryber codebase:
HTMLSectionextendsHTMLHeadFootContainerextendsPanelextendsVisualComponent- Inherits header/footer arrangement behavior from
HTMLHeadFootContainer - Overrides
GetBaseStyle()to setpage-break-before: trueby default - Shares implementation with
<article>element but conveys different semantic meaning
Default Behavior
The <section> element has the following default behavior:
- Block Display: Displays as a block-level element (stacks vertically)
- Full Width: Takes 100% of the parent container’s width by default
- Page Break Before: Automatically starts on a new page (override with CSS)
- Static Position: Uses normal document flow positioning
- Header/Footer Management: Automatically arranges header and footer elements
Examples
Basic Document Structure with Sections
<body>
<section title="Chapter 1: Introduction">
<header>
<h1>Chapter 1: Introduction</h1>
<p style="color: #666;">Understanding the Basics</p>
</header>
<p>This chapter introduces the fundamental concepts...</p>
<h2>Section 1.1: Overview</h2>
<p>Content for section 1.1...</p>
<h2>Section 1.2: Key Concepts</h2>
<p>Content for section 1.2...</p>
<footer>
<p style="font-size: 9pt; color: #999;">End of Chapter 1</p>
</footer>
</section>
<section title="Chapter 2: Getting Started">
<header>
<h1>Chapter 2: Getting Started</h1>
<p style="color: #666;">Your First Steps</p>
</header>
<p>In this chapter, we'll walk through...</p>
<footer>
<p style="font-size: 9pt; color: #999;">End of Chapter 2</p>
</footer>
</section>
<section title="Chapter 3: Advanced Topics">
<header>
<h1>Chapter 3: Advanced Topics</h1>
<p style="color: #666;">Deep Dive</p>
</header>
<p>This chapter explores advanced features...</p>
<footer>
<p style="font-size: 9pt; color: #999;">End of Chapter 3</p>
</footer>
</section>
</body>
Nested Sections (Hierarchical Structure)
<section title="Part I: Fundamentals">
<header style="background-color: #336699; color: white; padding: 20pt;">
<h1>Part I: Fundamentals</h1>
</header>
<section title="Chapter 1: Introduction" style="page-break-before: auto;">
<header style="border-bottom: 2pt solid #336699; padding-bottom: 10pt;">
<h2>Chapter 1: Introduction</h2>
</header>
<p>Content for chapter 1...</p>
</section>
<section title="Chapter 2: Basic Concepts">
<header style="border-bottom: 2pt solid #336699; padding-bottom: 10pt;">
<h2>Chapter 2: Basic Concepts</h2>
</header>
<p>Content for chapter 2...</p>
</section>
</section>
<section title="Part II: Advanced Topics">
<header style="background-color: #336699; color: white; padding: 20pt;">
<h1>Part II: Advanced Topics</h1>
</header>
<section title="Chapter 3: Advanced Features" style="page-break-before: auto;">
<header style="border-bottom: 2pt solid #336699; padding-bottom: 10pt;">
<h2>Chapter 3: Advanced Features</h2>
</header>
<p>Content for chapter 3...</p>
</section>
</section>
Section Without Page Break
<!-- First section starts on new page (default) -->
<section title="Overview">
<h1>Overview</h1>
<p>This is the overview section...</p>
</section>
<!-- These subsections continue on same page -->
<section title="Key Features" style="page-break-before: auto;">
<h2>Key Features</h2>
<p>Here are the key features...</p>
</section>
<section title="Benefits" style="page-break-before: auto;">
<h2>Benefits</h2>
<p>The main benefits include...</p>
</section>
<!-- This section forces a new page -->
<section title="Next Major Topic" style="page-break-before: always;">
<h1>Next Major Topic</h1>
<p>Starting a completely new topic...</p>
</section>
Section with Styled Header and Footer
<section title="Executive Summary">
<header style="background: linear-gradient(to right, #336699, #5588bb);
color: white;
padding: 25pt;
margin: -20pt -20pt 20pt -20pt;">
<h1 style="margin: 0; font-size: 32pt;">Executive Summary</h1>
<p style="margin: 10pt 0 0 0; font-size: 14pt; opacity: 0.9;">
Annual Report 2025
</p>
</header>
<div style="padding: 0 20pt;">
<h2>Financial Highlights</h2>
<p>Revenue increased by 25% year-over-year...</p>
<h2>Operational Excellence</h2>
<p>We achieved record efficiency metrics...</p>
<h2>Strategic Initiatives</h2>
<p>Our strategic initiatives focused on...</p>
</div>
<footer style="background-color: #f5f5f5;
padding: 15pt;
margin: 20pt -20pt -20pt -20pt;
border-top: 3pt solid #336699;">
<p style="margin: 0; font-size: 10pt; color: #666;">
This summary reflects data as of December 31, 2025
</p>
</footer>
</section>
Multi-Column Section
<section title="Feature Comparison">
<header>
<h1>Feature Comparison</h1>
</header>
<div style="column-count: 2; column-gap: 20pt; column-rule: 1pt solid #ddd;">
<h3>Basic Plan</h3>
<ul>
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<h3>Professional Plan</h3>
<ul>
<li>All Basic features</li>
<li>Feature D</li>
<li>Feature E</li>
<li>Priority Support</li>
</ul>
<h3>Enterprise Plan</h3>
<ul>
<li>All Professional features</li>
<li>Feature F</li>
<li>Custom Integration</li>
<li>Dedicated Support</li>
</ul>
</div>
<footer style="margin-top: 15pt; padding-top: 10pt; border-top: 1pt solid #ccc;">
<p style="font-size: 9pt; text-align: center;">
Contact sales for custom pricing
</p>
</footer>
</section>
Section with Data Binding
<!-- With model.chapters = [
{ id: 1, title: "Introduction", content: "...", author: "John" },
{ id: 2, title: "Methods", content: "...", author: "Jane" },
{ id: 3, title: "Results", content: "...", author: "Bob" }
] -->
<template data-bind="">
<section title="Chapter : ">
<header style="border-bottom: 2pt solid #336699; padding-bottom: 15pt; margin-bottom: 20pt;">
<h1>Chapter : </h1>
<p style="color: #666; font-size: 11pt;">Author: </p>
</header>
<div style="text-align: justify; line-height: 1.6;">
<h1 class="no_toc" id="progress--the-progress-bar-element"><progress> : The Progress Bar Element</h1>
<hr />
<details open="" class="top-toc">
<summary class="text-delta">
On this page
</summary>
<ul id="markdown-toc">
<li><a href="#summary" id="markdown-toc-summary">Summary</a></li>
<li><a href="#usage" id="markdown-toc-usage">Usage</a></li>
<li><a href="#supported-attributes" id="markdown-toc-supported-attributes">Supported Attributes</a> <ul>
<li><a href="#standard-html-attributes" id="markdown-toc-standard-html-attributes">Standard HTML Attributes</a></li>
<li><a href="#progress-specific-attributes" id="markdown-toc-progress-specific-attributes">Progress-Specific Attributes</a></li>
<li><a href="#data-binding-attributes" id="markdown-toc-data-binding-attributes">Data Binding Attributes</a></li>
<li><a href="#css-style-support" id="markdown-toc-css-style-support">CSS Style Support</a></li>
</ul>
</li>
<li><a href="#notes" id="markdown-toc-notes">Notes</a> <ul>
<li><a href="#progress-calculation" id="markdown-toc-progress-calculation">Progress Calculation</a></li>
<li><a href="#visual-structure" id="markdown-toc-visual-structure">Visual Structure</a></li>
<li><a href="#default-styling" id="markdown-toc-default-styling">Default Styling</a></li>
<li><a href="#difference-from-meter" id="markdown-toc-difference-from-meter">Difference from Meter</a></li>
<li><a href="#class-hierarchy" id="markdown-toc-class-hierarchy">Class Hierarchy</a></li>
<li><a href="#indeterminate-state" id="markdown-toc-indeterminate-state">Indeterminate State</a></li>
<li><a href="#use-cases-in-pdf" id="markdown-toc-use-cases-in-pdf">Use Cases in PDF</a></li>
</ul>
</li>
<li><a href="#examples" id="markdown-toc-examples">Examples</a> <ul>
<li><a href="#basic-progress-bars" id="markdown-toc-basic-progress-bars">Basic Progress Bars</a></li>
<li><a href="#file-upload-progress" id="markdown-toc-file-upload-progress">File Upload Progress</a></li>
<li><a href="#download-progress-with-labels" id="markdown-toc-download-progress-with-labels">Download Progress with Labels</a></li>
<li><a href="#task-completion-tracker" id="markdown-toc-task-completion-tracker">Task Completion Tracker</a></li>
<li><a href="#styled-progress-with-custom-colors" id="markdown-toc-styled-progress-with-custom-colors">Styled Progress with Custom Colors</a></li>
<li><a href="#multiple-progress-indicators" id="markdown-toc-multiple-progress-indicators">Multiple Progress Indicators</a></li>
<li><a href="#sales-goal-progress" id="markdown-toc-sales-goal-progress">Sales Goal Progress</a></li>
<li><a href="#course-completion-progress" id="markdown-toc-course-completion-progress">Course Completion Progress</a></li>
<li><a href="#data-bound-progress-bars" id="markdown-toc-data-bound-progress-bars">Data-Bound Progress Bars</a></li>
<li><a href="#fitness-goals-dashboard" id="markdown-toc-fitness-goals-dashboard">Fitness Goals Dashboard</a></li>
<li><a href="#software-update-progress" id="markdown-toc-software-update-progress">Software Update Progress</a></li>
<li><a href="#project-milestone-progress" id="markdown-toc-project-milestone-progress">Project Milestone Progress</a></li>
<li><a href="#budget-vs-actual-spending" id="markdown-toc-budget-vs-actual-spending">Budget vs Actual Spending</a></li>
<li><a href="#repeating-progress-from-collection" id="markdown-toc-repeating-progress-from-collection">Repeating Progress from Collection</a></li>
<li><a href="#circularvertical-progress-representation" id="markdown-toc-circularvertical-progress-representation">Circular/Vertical Progress Representation</a></li>
<li><a href="#stacked-progress-bars" id="markdown-toc-stacked-progress-bars">Stacked Progress Bars</a></li>
</ul>
</li>
<li><a href="#see-also" id="markdown-toc-see-also">See Also</a></li>
</ul>
</details>
<hr />
<h2 id="summary">Summary</h2>
<p>The <code class="language-plaintext highlighter-rouge"><progress></code> element represents the completion progress of a task. In PDF output, it renders as a static visual bar showing the current progress value. Unlike the <code class="language-plaintext highlighter-rouge"><meter></code> element which shows measurements against thresholds, <code class="language-plaintext highlighter-rouge"><progress></code> specifically represents task completion from 0% to 100%.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge"><progress></code> element creates a progress indicator that:</p>
<ul>
<li>Renders as a horizontal progress bar in static PDF output</li>
<li>Shows task completion as a percentage (value / max)</li>
<li>Displays with a green fill for the completed portion by default</li>
<li>Uses inline-block display by default</li>
<li>Can be styled extensively with CSS</li>
<li>Supports data binding for dynamic values</li>
<li>Automatically calculates percentage widths</li>
<li>Perfect for showing download progress, upload status, or task completion</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Basic progress: 60% complete --></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"0.6"</span> <span class="na">max=</span><span class="s">"1"</span><span class="nt">></span>60%<span class="nt"></progress></span>
<span class="c"><!-- File upload progress --></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"45"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>45%<span class="nt"></progress></span>
<span class="c"><!-- Styled progress bar --></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"7"</span> <span class="na">max=</span><span class="s">"10"</span> <span class="na">style=</span><span class="s">"width: 250pt; height: 25pt;"</span><span class="nt">></span>
70% complete
<span class="nt"></progress></span>
</code></pre></div></div>
<hr />
<h2 id="supported-attributes">Supported Attributes</h2>
<h3 id="standard-html-attributes">Standard HTML Attributes</h3>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">id</code></td>
<td>string</td>
<td>Unique identifier for the element.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">class</code></td>
<td>string</td>
<td>CSS class name(s) for styling. Multiple classes separated by spaces.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">style</code></td>
<td>string</td>
<td>Inline CSS styles applied directly to the element.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">title</code></td>
<td>string</td>
<td>Tooltip text or outline title.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">hidden</code></td>
<td>string</td>
<td>Controls visibility. Set to “hidden” to hide the element, or omit/empty to show.</td>
</tr>
</tbody>
</table>
<h3 id="progress-specific-attributes">Progress-Specific Attributes</h3>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">value</code></td>
<td>double</td>
<td><strong>Required</strong>. Current progress value. Must be between 0 and max.</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">max</code></td>
<td>double</td>
<td>Maximum value representing 100% completion. Default: 1.</td>
</tr>
</tbody>
</table>
<h3 id="data-binding-attributes">Data Binding Attributes</h3>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">data-bind</code></td>
<td>expression</td>
<td>Binds the element to a data context for use with templates.</td>
</tr>
</tbody>
</table>
<h3 id="css-style-support">CSS Style Support</h3>
<p>The <code class="language-plaintext highlighter-rouge"><progress></code> element supports extensive CSS styling:</p>
<p><strong>Sizing</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">width</code>, <code class="language-plaintext highlighter-rouge">height</code>, <code class="language-plaintext highlighter-rouge">min-width</code>, <code class="language-plaintext highlighter-rouge">max-width</code>, <code class="language-plaintext highlighter-rouge">min-height</code>, <code class="language-plaintext highlighter-rouge">max-height</code></li>
</ul>
<p><strong>Positioning</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">display</code>: <code class="language-plaintext highlighter-rouge">inline-block</code> (default), <code class="language-plaintext highlighter-rouge">block</code>, <code class="language-plaintext highlighter-rouge">inline</code>, <code class="language-plaintext highlighter-rouge">none</code></li>
<li><code class="language-plaintext highlighter-rouge">position</code>: <code class="language-plaintext highlighter-rouge">static</code>, <code class="language-plaintext highlighter-rouge">relative</code>, <code class="language-plaintext highlighter-rouge">absolute</code></li>
<li><code class="language-plaintext highlighter-rouge">float</code>: <code class="language-plaintext highlighter-rouge">left</code>, <code class="language-plaintext highlighter-rouge">right</code>, <code class="language-plaintext highlighter-rouge">none</code></li>
<li><code class="language-plaintext highlighter-rouge">vertical-align</code>: <code class="language-plaintext highlighter-rouge">top</code>, <code class="language-plaintext highlighter-rouge">middle</code>, <code class="language-plaintext highlighter-rouge">bottom</code>, <code class="language-plaintext highlighter-rouge">baseline</code></li>
</ul>
<p><strong>Spacing</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">margin</code>, <code class="language-plaintext highlighter-rouge">margin-top</code>, <code class="language-plaintext highlighter-rouge">margin-right</code>, <code class="language-plaintext highlighter-rouge">margin-bottom</code>, <code class="language-plaintext highlighter-rouge">margin-left</code></li>
<li><code class="language-plaintext highlighter-rouge">padding</code> (all variants)</li>
</ul>
<p><strong>Visual Effects</strong>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">border</code>, <code class="language-plaintext highlighter-rouge">border-width</code>, <code class="language-plaintext highlighter-rouge">border-color</code>, <code class="language-plaintext highlighter-rouge">border-style</code>, <code class="language-plaintext highlighter-rouge">border-radius</code></li>
<li><code class="language-plaintext highlighter-rouge">background-color</code> (for the bar container background)</li>
<li><code class="language-plaintext highlighter-rouge">opacity</code></li>
<li><code class="language-plaintext highlighter-rouge">transform</code> (rotation, scaling, translation)</li>
<li><code class="language-plaintext highlighter-rouge">overflow</code>: Controls clipping behavior (default: clip)</li>
</ul>
<p><strong>Progress-Specific Styling</strong> (via pseudo-classes):</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">.progress-bar</code>: Styles the container bar (background)</li>
<li><code class="language-plaintext highlighter-rouge">.progress-value</code>: Styles the filled progress portion (foreground)</li>
</ul>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="progress-calculation">Progress Calculation</h3>
<p>The progress bar automatically calculates the fill percentage:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>percentage = (value / max) * 100%
</code></pre></div></div>
<p><strong>Special cases:</strong></p>
<ul>
<li>If <code class="language-plaintext highlighter-rouge">value >= max</code>: Shows 100% (full bar)</li>
<li>If <code class="language-plaintext highlighter-rouge">value < 0</code>: Shows 0% (empty bar)</li>
<li>If <code class="language-plaintext highlighter-rouge">value</code> is between 0 and max: Shows proportional fill</li>
</ul>
<p><strong>Examples:</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- 50% --></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"0.5"</span> <span class="na">max=</span><span class="s">"1"</span><span class="nt">></progress></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"50"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></progress></span>
<span class="c"><!-- 75% --></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"75"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></progress></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"0.75"</span> <span class="na">max=</span><span class="s">"1"</span><span class="nt">></progress></span>
<span class="c"><!-- 33.3% --></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"10"</span> <span class="na">max=</span><span class="s">"30"</span><span class="nt">></progress></span>
</code></pre></div></div>
<h3 id="visual-structure">Visual Structure</h3>
<p>The progress bar is rendered using nested div elements:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div class="progress"> ← Main container (gray background)
<div class="progress-bar"> ← Bar container (100% width)
<div class="progress-value"> ← Filled portion (green, calculated width)
</code></pre></div></div>
<h3 id="default-styling">Default Styling</h3>
<p>By default, progress bars have:</p>
<ul>
<li>Width: 10rem (160pt approximately)</li>
<li>Height: 1rem (16pt approximately)</li>
<li>Container background: Gray (#C0C0C0)</li>
<li>Progress value color: Green (#008000)</li>
<li>Display: inline-block</li>
<li>Overflow: clip (content doesn’t overflow)</li>
</ul>
<h3 id="difference-from-meter">Difference from Meter</h3>
<p>While <code class="language-plaintext highlighter-rouge"><progress></code> and <code class="language-plaintext highlighter-rouge"><meter></code> look similar, they serve different purposes:</p>
<table>
<thead>
<tr>
<th>Feature</th>
<th><code class="language-plaintext highlighter-rouge"><progress></code></th>
<th><code class="language-plaintext highlighter-rouge"><meter></code></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Purpose</strong></td>
<td>Task completion (0% to 100%)</td>
<td>Measurement within a range</td>
</tr>
<tr>
<td><strong>Thresholds</strong></td>
<td>None</td>
<td>Supports low, high, optimum</td>
</tr>
<tr>
<td><strong>Color Coding</strong></td>
<td>Single color (green)</td>
<td>Multiple colors based on thresholds</td>
</tr>
<tr>
<td><strong>Use Case</strong></td>
<td>Downloads, uploads, tasks</td>
<td>Disk usage, scores, ratings</td>
</tr>
<tr>
<td><strong>Semantic</strong></td>
<td>Indicates ongoing activity</td>
<td>Indicates current state</td>
</tr>
</tbody>
</table>
<h3 id="class-hierarchy">Class Hierarchy</h3>
<p>In the Scryber codebase:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">HTMLProgress</code> extends <code class="language-plaintext highlighter-rouge">Panel</code> extends <code class="language-plaintext highlighter-rouge">VisualComponent</code></li>
<li>Uses nested components: <code class="language-plaintext highlighter-rouge">ProgressBar</code> and <code class="language-plaintext highlighter-rouge">ProgressValue</code></li>
<li>The value bar width is calculated during layout</li>
</ul>
<h3 id="indeterminate-state">Indeterminate State</h3>
<p>HTML supports an indeterminate state (progress without a value), but in PDF:</p>
<ul>
<li>This would render as an empty bar (0%)</li>
<li>Always provide a <code class="language-plaintext highlighter-rouge">value</code> attribute for meaningful PDF output</li>
<li>Use styling to indicate “in progress” vs “complete”</li>
</ul>
<h3 id="use-cases-in-pdf">Use Cases in PDF</h3>
<p>Progress bars are excellent for:</p>
<ol>
<li><strong>Report Generation Progress</strong>: Show how much of a report is complete</li>
<li><strong>Goal Achievement</strong>: Display progress toward sales targets, KPIs</li>
<li><strong>Task Completion</strong>: Show project milestones and completion status</li>
<li><strong>Data Processing</strong>: Indicate batch processing completion</li>
<li><strong>Survey Results</strong>: Display response rates and participation</li>
<li><strong>Learning Progress</strong>: Show course completion, skill development</li>
</ol>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="basic-progress-bars">Basic Progress Bars</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- 25% complete --></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"25"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>25%<span class="nt"></progress></span>
<span class="c"><!-- 50% complete --></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"0.5"</span> <span class="na">max=</span><span class="s">"1"</span><span class="nt">></span>50%<span class="nt"></progress></span>
<span class="c"><!-- 75% complete with styling --></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"75"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 200pt; height: 20pt;"</span><span class="nt">></span>
75%
<span class="nt"></progress></span>
<span class="c"><!-- 100% complete --></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"100"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>100%<span class="nt"></progress></span>
</code></pre></div></div>
<h3 id="file-upload-progress">File Upload Progress</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 15pt; border: 1pt solid #ddd; border-radius: 6pt;"</span><span class="nt">></span>
<span class="nt"><h4</span> <span class="na">style=</span><span class="s">"margin: 0 0 10pt 0;"</span><span class="nt">></span>Uploading document.pdf<span class="nt"></h4></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"67"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 24pt; border: 1pt solid #ccc; border-radius: 4pt;"</span><span class="nt">></span>
67%
<span class="nt"></progress></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 8pt; color: #666; font-size: 9pt;"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: left;"</span><span class="nt">></span>67 MB of 100 MB<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right;"</span><span class="nt">></span>67% complete<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="download-progress-with-labels">Download Progress with Labels</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.download-container</span> <span class="p">{</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#e0e0e0</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">6pt</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#fafafa</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.download-progress</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">22pt</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.download-info</span> <span class="p">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="m">#555</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"download-container"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 10pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>report-2024.pdf<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: #4CAF50; font-weight: bold;"</span><span class="nt">></span>Downloading...<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">class=</span><span class="s">"download-progress"</span> <span class="na">value=</span><span class="s">"42"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>42%<span class="nt"></progress></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"download-info"</span><span class="nt">></span>
<span class="nt"><span></span>4.2 MB of 10 MB<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right;"</span><span class="nt">></span>Estimated time: 15 seconds<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="task-completion-tracker">Task Completion Tracker</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 20pt;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0 0 20pt 0;"</span><span class="nt">></span>Project Tasks<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>Requirements Gathering<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: green; font-weight: bold;"</span><span class="nt">></span>✓ Complete<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"100"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 100%; height: 20pt;"</span><span class="nt">></span>100%<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>Design Phase<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: green; font-weight: bold;"</span><span class="nt">></span>✓ Complete<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"100"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 100%; height: 20pt;"</span><span class="nt">></span>100%<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>Development<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: #2196F3; font-weight: bold;"</span><span class="nt">></span>In Progress (78%)<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"78"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 100%; height: 20pt;"</span><span class="nt">></span>78%<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 6pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>Testing<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: #999;"</span><span class="nt">></span>Not Started<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 100%; height: 20pt;"</span><span class="nt">></span>0%<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="styled-progress-with-custom-colors">Styled Progress with Custom Colors</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><style></span>
<span class="nc">.custom-progress</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">280pt</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#e0e0e0</span><span class="p">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#bdbdbd</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
<span class="nl">overflow</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.progress-bar</span> <span class="p">{</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.progress-value</span> <span class="p">{</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="n">to</span> <span class="nb">right</span><span class="p">,</span> <span class="m">#667eea</span><span class="p">,</span> <span class="m">#764ba2</span><span class="p">);</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 15pt;"</span><span class="nt">></span>
<span class="nt"><h4</span> <span class="na">style=</span><span class="s">"margin-bottom: 10pt;"</span><span class="nt">></span>Gradient Progress Bar<span class="nt"></h4></span>
<span class="nt"><progress</span> <span class="na">class=</span><span class="s">"custom-progress"</span> <span class="na">value=</span><span class="s">"65"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>65%<span class="nt"></progress></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin-top: 5pt; font-size: 9pt; color: #666;"</span><span class="nt">></span>65% complete<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="multiple-progress-indicators">Multiple Progress Indicators</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 2pt solid #336699; border-radius: 8pt; padding: 20pt;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0 0 20pt 0; color: #336699;"</span><span class="nt">></span>System Setup Progress<span class="nt"></h3></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt; width: 140pt; font-weight: 600;"</span><span class="nt">></span>
Installing Files
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"100"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 18pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
100%
<span class="nt"></progress></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt; width: 60pt; text-align: right; color: green;"</span><span class="nt">></span>
100%
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #f9f9f9;"</span><span class="nt">></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt; font-weight: 600;"</span><span class="nt">></span>
Configuring Database
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"85"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 18pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
85%
<span class="nt"></progress></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt; text-align: right; color: #2196F3;"</span><span class="nt">></span>
85%
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt; font-weight: 600;"</span><span class="nt">></span>
Running Tests
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"42"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 18pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
42%
<span class="nt"></progress></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt; text-align: right; color: #2196F3;"</span><span class="nt">></span>
42%
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #f9f9f9;"</span><span class="nt">></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt; font-weight: 600;"</span><span class="nt">></span>
Final Setup
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt;"</span><span class="nt">></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 18pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
0%
<span class="nt"></progress></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 10pt; text-align: right; color: #999;"</span><span class="nt">></span>
0%
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="sales-goal-progress">Sales Goal Progress</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 25pt; border-radius: 10pt; color: white;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0 0 25pt 0; font-size: 16pt;"</span><span class="nt">></span>Quarterly Sales Goal<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: rgba(255,255,255,0.15); padding: 20pt; border-radius: 8pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 12pt;"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-size: 32pt; font-weight: bold;"</span><span class="nt">></span>$875,000<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-size: 14pt; opacity: 0.9;"</span><span class="nt">></span> / $1,000,000<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"875"</span> <span class="na">max=</span><span class="s">"1000"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 32pt; border: 3pt solid rgba(255,255,255,0.3);
border-radius: 16pt; background-color: rgba(0,0,0,0.2);"</span><span class="nt">></span>
87.5%
<span class="nt"></progress></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 18pt; font-weight: bold;"</span><span class="nt">></span>87.5% Complete<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 10pt; opacity: 0.9; margin-top: 5pt;"</span><span class="nt">></span>
Outstanding performance! Only $125,000 to goal.
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="course-completion-progress">Course Completion Progress</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 1pt solid #e0e0e0; border-radius: 8pt; padding: 20pt; margin: 15pt 0;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0 0 15pt 0; color: #333;"</span><span class="nt">></span>Learning Path: Full Stack Development<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><strong</span> <span class="na">style=</span><span class="s">"color: #555;"</span><span class="nt">></span>Overall Progress<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; font-size: 18pt; font-weight: bold; color: #4CAF50;"</span><span class="nt">></span>
68%
<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"68"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 28pt; border: 2pt solid #4CAF50; border-radius: 14pt;"</span><span class="nt">></span>
68%
<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #f9f9f9; padding: 15pt; border-radius: 6pt;"</span><span class="nt">></span>
<span class="nt"><h4</span> <span class="na">style=</span><span class="s">"margin: 0 0 15pt 0; color: #555;"</span><span class="nt">></span>Module Progress<span class="nt"></h4></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 4pt; font-size: 10pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>HTML <span class="err">&</span> CSS Fundamentals<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: green;"</span><span class="nt">></span>Complete<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"100"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 100%; height: 16pt;"</span><span class="nt">></span>100%<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 4pt; font-size: 10pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>JavaScript Essentials<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: green;"</span><span class="nt">></span>Complete<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"100"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 100%; height: 16pt;"</span><span class="nt">></span>100%<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 4pt; font-size: 10pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>React Framework<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: #2196F3;"</span><span class="nt">></span>82% (12/15 lessons)<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"82"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 100%; height: 16pt;"</span><span class="nt">></span>82%<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 4pt; font-size: 10pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>Node.js <span class="err">&</span> Express<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: #2196F3;"</span><span class="nt">></span>45% (9/20 lessons)<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"45"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 100%; height: 16pt;"</span><span class="nt">></span>45%<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 4pt; font-size: 10pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>Database Design<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: #999;"</span><span class="nt">></span>Not Started<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 100%; height: 16pt;"</span><span class="nt">></span>0%<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="data-bound-progress-bars">Data-Bound Progress Bars</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- With model = {
uploadProgress: 73,
downloadProgress: 92,
processingProgress: 45
} --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 15pt; background-color: #f5f5f5; border-radius: 6pt;"</span><span class="nt">></span>
<span class="nt"><h4</span> <span class="na">style=</span><span class="s">"margin: 0 0 15pt 0;"</span><span class="nt">></span>File Operations<span class="nt"></h4></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 12pt 0;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 5pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>Upload Progress:<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right;"</span><span class="nt">></span>%<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">""</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 20pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
%
<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 12pt 0;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 5pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>Download Progress:<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right;"</span><span class="nt">></span>%<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">""</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 20pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
%
<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 12pt 0;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 5pt;"</span><span class="nt">></span>
<span class="nt"><strong></span>Processing:<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right;"</span><span class="nt">></span>%<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">""</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 20pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
%
<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="fitness-goals-dashboard">Fitness Goals Dashboard</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 2pt solid #FF5722; border-radius: 10pt; padding: 20pt;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0 0 20pt 0; color: #FF5722;"</span><span class="nt">></span>Weekly Fitness Goals<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 18pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-weight: bold; font-size: 11pt;"</span><span class="nt">></span>🏃 Running<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: green; font-weight: bold;"</span><span class="nt">></span>
10 / 10 miles
<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"10"</span> <span class="na">max=</span><span class="s">"10"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 24pt; border: 1pt solid #ddd; border-radius: 12pt;"</span><span class="nt">></span>
100%
<span class="nt"></progress></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 4pt; font-size: 9pt; color: green;"</span><span class="nt">></span>
✓ Goal achieved! Great job!
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 18pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-weight: bold; font-size: 11pt;"</span><span class="nt">></span>🏋 Strength Training<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: #2196F3; font-weight: bold;"</span><span class="nt">></span>
3 / 4 sessions
<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">max=</span><span class="s">"4"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 24pt; border: 1pt solid #ddd; border-radius: 12pt;"</span><span class="nt">></span>
75%
<span class="nt"></progress></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 4pt; font-size: 9pt; color: #2196F3;"</span><span class="nt">></span>
Almost there! 1 more session to go.
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 18pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-weight: bold; font-size: 11pt;"</span><span class="nt">></span>🧘 Yoga<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: #2196F3; font-weight: bold;"</span><span class="nt">></span>
2 / 3 sessions
<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">max=</span><span class="s">"3"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 24pt; border: 1pt solid #ddd; border-radius: 12pt;"</span><span class="nt">></span>
67%
<span class="nt"></progress></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 4pt; font-size: 9pt; color: #2196F3;"</span><span class="nt">></span>
Keep it up!
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 0;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"font-weight: bold; font-size: 11pt;"</span><span class="nt">></span>💧 Hydration<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: orange; font-weight: bold;"</span><span class="nt">></span>
42 / 56 glasses
<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"42"</span> <span class="na">max=</span><span class="s">"56"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 24pt; border: 1pt solid #ddd; border-radius: 12pt;"</span><span class="nt">></span>
75%
<span class="nt"></progress></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 4pt; font-size: 9pt; color: orange;"</span><span class="nt">></span>
Stay hydrated! 14 more glasses this week.
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="software-update-progress">Software Update Progress</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"background-color: #263238; color: white; padding: 25pt; border-radius: 8pt;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0 0 10pt 0; font-size: 18pt;"</span><span class="nt">></span>System Update in Progress<span class="nt"></h3></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 0 0 25pt 0; opacity: 0.8; font-size: 10pt;"</span><span class="nt">></span>
Please do not turn off your computer
<span class="nt"></p></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"68"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 36pt; border: 2pt solid #37474F;
border-radius: 18pt; background-color: #37474F;"</span><span class="nt">></span>
68%
<span class="nt"></progress></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 15pt; text-align: center;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 28pt; font-weight: bold;"</span><span class="nt">></span>68%<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 11pt; opacity: 0.8; margin-top: 5pt;"</span><span class="nt">></span>
Estimated time remaining: 5 minutes
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 25pt; padding-top: 20pt; border-top: 1pt solid rgba(255,255,255,0.1);"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 10pt; opacity: 0.7;"</span><span class="nt">></span>Current step:<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"font-size: 11pt; margin-top: 5pt;"</span><span class="nt">></span>Installing security updates...<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="project-milestone-progress">Project Milestone Progress</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 20pt;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0 0 25pt 0; color: #333;"</span><span class="nt">></span>Development Roadmap<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"position: relative; padding-left: 40pt;"</span><span class="nt">></span>
<span class="c"><!-- Milestone 1 --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 30pt; position: relative;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"position: absolute; left: -40pt; top: 0;
width: 24pt; height: 24pt; border-radius: 12pt;
background-color: #4CAF50; border: 3pt solid white;
box-shadow: 0 0 0 2pt #4CAF50;"</span><span class="nt">></div></span>
<span class="nt"><h4</span> <span class="na">style=</span><span class="s">"margin: 0 0 8pt 0; color: #4CAF50;"</span><span class="nt">></span>Phase 1: Foundation<span class="nt"></h4></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"100"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 20pt; border: 1pt solid #4CAF50;"</span><span class="nt">></span>
100%
<span class="nt"></progress></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0 0 0; font-size: 9pt; color: #666;"</span><span class="nt">></span>
Completed: March 2024
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="c"><!-- Milestone 2 --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 30pt; position: relative;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"position: absolute; left: -40pt; top: 0;
width: 24pt; height: 24pt; border-radius: 12pt;
background-color: #2196F3; border: 3pt solid white;
box-shadow: 0 0 0 2pt #2196F3;"</span><span class="nt">></div></span>
<span class="nt"><h4</span> <span class="na">style=</span><span class="s">"margin: 0 0 8pt 0; color: #2196F3;"</span><span class="nt">></span>Phase 2: Core Features<span class="nt"></h4></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"78"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 20pt; border: 1pt solid #2196F3;"</span><span class="nt">></span>
78%
<span class="nt"></progress></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0 0 0; font-size: 9pt; color: #666;"</span><span class="nt">></span>
In Progress: Expected April 2024
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="c"><!-- Milestone 3 --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 0; position: relative;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"position: absolute; left: -40pt; top: 0;
width: 24pt; height: 24pt; border-radius: 12pt;
background-color: #ccc; border: 3pt solid white;
box-shadow: 0 0 0 2pt #ccc;"</span><span class="nt">></div></span>
<span class="nt"><h4</span> <span class="na">style=</span><span class="s">"margin: 0 0 8pt 0; color: #999;"</span><span class="nt">></span>Phase 3: Polish <span class="err">&</span> Launch<span class="nt"></h4></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 20pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
0%
<span class="nt"></progress></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0 0 0; font-size: 9pt; color: #666;"</span><span class="nt">></span>
Scheduled: May 2024
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="budget-vs-actual-spending">Budget vs Actual Spending</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 1pt solid #e0e0e0; border-radius: 8pt; padding: 20pt;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0 0 20pt 0; color: #333;"</span><span class="nt">></span>Department Budget Utilization<span class="nt"></h3></span>
<span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%;"</span><span class="nt">></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt; width: 140pt; font-weight: 600; border-bottom: 1pt solid #f0f0f0;"</span><span class="nt">></span>
Marketing
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt; border-bottom: 1pt solid #f0f0f0;"</span><span class="nt">></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"85"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 20pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
85%
<span class="nt"></progress></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt; width: 120pt; text-align: right; border-bottom: 1pt solid #f0f0f0;"</span><span class="nt">></span>
$85K / $100K
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt; font-weight: 600; border-bottom: 1pt solid #f0f0f0;"</span><span class="nt">></span>
Engineering
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt; border-bottom: 1pt solid #f0f0f0;"</span><span class="nt">></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"72"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 20pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
72%
<span class="nt"></progress></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt; text-align: right; border-bottom: 1pt solid #f0f0f0;"</span><span class="nt">></span>
$360K / $500K
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt; font-weight: 600; border-bottom: 1pt solid #f0f0f0;"</span><span class="nt">></span>
Sales
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt; border-bottom: 1pt solid #f0f0f0;"</span><span class="nt">></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"93"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 20pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
93%
<span class="nt"></progress></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt; text-align: right; border-bottom: 1pt solid #f0f0f0;"</span><span class="nt">></span>
$279K / $300K
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt; font-weight: 600;"</span><span class="nt">></span>
Operations
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt;"</span><span class="nt">></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"55"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 20pt; border: 1pt solid #ccc;"</span><span class="nt">></span>
55%
<span class="nt"></progress></span>
<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 12pt; text-align: right;"</span><span class="nt">></span>
$110K / $200K
<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></table></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="repeating-progress-from-collection">Repeating Progress from Collection</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- With model.projects = [
{name: "Website Redesign", progress: 92, total: 100},
{name: "Mobile App", progress: 67, total: 100},
{name: "API Integration", progress: 45, total: 100},
{name: "Documentation", progress: 23, total: 100}
] --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 20pt;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0 0 20pt 0;"</span><span class="nt">></span>Active Projects<span class="nt"></h3></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 1pt solid #e0e0e0; border-radius: 6pt;
padding: 15pt; margin-bottom: 15pt; background-color: #fafafa;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-bottom: 8pt;"</span><span class="nt">></span>
<span class="nt"><strong</span> <span class="na">style=</span><span class="s">"font-size: 11pt;"</span><span class="nt">></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: #666; font-weight: bold;"</span><span class="nt">></span>
%
<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">""</span> <span class="na">max=</span><span class="s">""</span>
<span class="na">style=</span><span class="s">"width: 100%; height: 22pt; border: 1pt solid #ccc; border-radius: 11pt;"</span><span class="nt">></span>
%
<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="circularvertical-progress-representation">Circular/Vertical Progress Representation</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Note: Progress bars are horizontal by default, but you can rotate them --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: center; padding: 20pt;"</span><span class="nt">></span>
<span class="nt"><h4</span> <span class="na">style=</span><span class="s">"margin-bottom: 30pt;"</span><span class="nt">></span>Server Status<span class="nt"></h4></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin: 0 20pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"transform: rotate(-90deg); transform-origin: center;
width: 150pt; margin: 75pt 0;"</span><span class="nt">></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"85"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 150pt; height: 30pt; border: 2pt solid #333; border-radius: 15pt;"</span><span class="nt">></span>
85%
<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin-top: 20pt; font-weight: bold;"</span><span class="nt">></span>Server 1<span class="nt"><br/></span>85%<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin: 0 20pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"transform: rotate(-90deg); transform-origin: center;
width: 150pt; margin: 75pt 0;"</span><span class="nt">></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"62"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 150pt; height: 30pt; border: 2pt solid #333; border-radius: 15pt;"</span><span class="nt">></span>
62%
<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin-top: 20pt; font-weight: bold;"</span><span class="nt">></span>Server 2<span class="nt"><br/></span>62%<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: inline-block; margin: 0 20pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"transform: rotate(-90deg); transform-origin: center;
width: 150pt; margin: 75pt 0;"</span><span class="nt">></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">"94"</span> <span class="na">max=</span><span class="s">"100"</span>
<span class="na">style=</span><span class="s">"width: 150pt; height: 30pt; border: 2pt solid #333; border-radius: 15pt;"</span><span class="nt">></span>
94%
<span class="nt"></progress></span>
<span class="nt"></div></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin-top: 20pt; font-weight: bold;"</span><span class="nt">></span>Server 3<span class="nt"><br/></span>94%<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="stacked-progress-bars">Stacked Progress Bars</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ddd; border-radius: 8pt; padding: 20pt;"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"margin: 0 0 15pt 0;"</span><span class="nt">></span>Storage Breakdown<span class="nt"></h3></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"height: 40pt; position: relative; border: 1pt solid #ccc;
border-radius: 4pt; overflow: hidden; background-color: #f0f0f0;"</span><span class="nt">></span>
<span class="c"><!-- Documents: 35% --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"position: absolute; left: 0; top: 0; bottom: 0; width: 35%;
background-color: #2196F3;"</span><span class="nt">></div></span>
<span class="c"><!-- Images: 25% (starts at 35%) --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"position: absolute; left: 35%; top: 0; bottom: 0; width: 25%;
background-color: #4CAF50;"</span><span class="nt">></div></span>
<span class="c"><!-- Videos: 20% (starts at 60%) --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"position: absolute; left: 60%; top: 0; bottom: 0; width: 20%;
background-color: #FF9800;"</span><span class="nt">></div></span>
<span class="c"><!-- Other: 15% (starts at 80%) --></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"position: absolute; left: 80%; top: 0; bottom: 0; width: 15%;
background-color: #9C27B0;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 15pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 8pt 0;"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 16pt; height: 16pt;
background-color: #2196F3; border-radius: 2pt;
vertical-align: middle; margin-right: 8pt;"</span><span class="nt">></span></span>
<span class="nt"><strong></span>Documents<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right;"</span><span class="nt">></span>35% (350 GB)<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 8pt 0;"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 16pt; height: 16pt;
background-color: #4CAF50; border-radius: 2pt;
vertical-align: middle; margin-right: 8pt;"</span><span class="nt">></span></span>
<span class="nt"><strong></span>Images<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right;"</span><span class="nt">></span>25% (250 GB)<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 8pt 0;"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 16pt; height: 16pt;
background-color: #FF9800; border-radius: 2pt;
vertical-align: middle; margin-right: 8pt;"</span><span class="nt">></span></span>
<span class="nt"><strong></span>Videos<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right;"</span><span class="nt">></span>20% (200 GB)<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 8pt 0;"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"display: inline-block; width: 16pt; height: 16pt;
background-color: #9C27B0; border-radius: 2pt;
vertical-align: middle; margin-right: 8pt;"</span><span class="nt">></span></span>
<span class="nt"><strong></span>Other<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right;"</span><span class="nt">></span>15% (150 GB)<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin: 8pt 0; padding-top: 10pt; border-top: 1pt solid #ddd;"</span><span class="nt">></span>
<span class="nt"><strong></span>Free Space<span class="nt"></strong></span>
<span class="nt"><span</span> <span class="na">style=</span><span class="s">"float: right; color: #4CAF50; font-weight: bold;"</span><span class="nt">></span>
5% (50 GB available)
<span class="nt"></span></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"clear: both;"</span><span class="nt">></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/meter.html">meter</a> - Meter/gauge element (for measurements with thresholds)</li>
<li><a href="/reference/htmltags/div.html">div</a> - Generic container (can create custom progress indicators)</li>
<li><a href="/reference/binding/">Data Binding</a> - Data binding and expressions</li>
<li><a href="/reference/styles/">CSS Styles</a> - Complete CSS styling reference</li>
<li><a href="/reference/components/visual.html">Visual Components</a> - Base visual component</li>
</ul>
<hr />
</div>
<footer style="margin-top: 30pt; padding-top: 15pt; border-top: 1pt solid #ccc; text-align: center;">
<p style="font-size: 9pt; color: #999;">
End of Chapter
</p>
</footer>
</section>
</template>
Academic Paper Structure
<body>
<!-- Title page -->
<div style="text-align: center; padding-top: 100pt;">
<h1 style="font-size: 24pt;">Research Paper Title</h1>
<p style="font-size: 14pt; margin-top: 20pt;">Authors</p>
<p style="font-size: 12pt;">Date</p>
</div>
<!-- Abstract (no page break) -->
<section title="Abstract" style="page-break-before: always; page-break-after: auto;">
<header>
<h1>Abstract</h1>
</header>
<p style="text-align: justify;">
This paper presents a comprehensive analysis...
</p>
</section>
<!-- Main sections -->
<section title="1. Introduction">
<header>
<h1>1. Introduction</h1>
</header>
<p style="text-align: justify;">
The field of PDF generation has evolved...
</p>
</section>
<section title="2. Literature Review">
<header>
<h1>2. Literature Review</h1>
</header>
<p style="text-align: justify;">
Previous research in this area includes...
</p>
</section>
<section title="3. Methodology">
<header>
<h1>3. Methodology</h1>
</header>
<p style="text-align: justify;">
Our research methodology consisted of...
</p>
</section>
<section title="4. Results">
<header>
<h1>4. Results</h1>
</header>
<p style="text-align: justify;">
The results of our analysis show...
</p>
</section>
<section title="5. Discussion">
<header>
<h1>5. Discussion</h1>
</header>
<p style="text-align: justify;">
These findings have several implications...
</p>
</section>
<section title="6. Conclusion">
<header>
<h1>6. Conclusion</h1>
</header>
<p style="text-align: justify;">
In conclusion, this research demonstrates...
</p>
</section>
<section title="References">
<header>
<h1>References</h1>
</header>
<ol style="font-size: 10pt;">
<li>Author 1 (2024). Title of Paper...</li>
<li>Author 2 (2023). Title of Paper...</li>
</ol>
</section>
</body>
Technical Manual Sections
<section title="Installation Guide">
<header style="background-color: #336699; color: white; padding: 15pt;">
<h1 style="margin: 0;">Installation Guide</h1>
</header>
<div style="padding: 20pt;">
<h2>System Requirements</h2>
<ul>
<li>.NET 6.0 or higher</li>
<li>Windows, Linux, or macOS</li>
<li>Minimum 4GB RAM</li>
</ul>
<h2>Installation Steps</h2>
<ol>
<li>Download the installer</li>
<li>Run the setup wizard</li>
<li>Configure settings</li>
<li>Verify installation</li>
</ol>
<div style="background-color: #fff3cd; border-left: 4pt solid #ffc107; padding: 10pt; margin: 15pt 0;">
<strong>Note:</strong> Administrator privileges are required for installation.
</div>
</div>
<footer style="background-color: #f0f0f0; padding: 10pt; font-size: 9pt;">
For support, visit our website or contact support@example.com
</footer>
</section>
<section title="Configuration">
<header style="background-color: #336699; color: white; padding: 15pt;">
<h1 style="margin: 0;">Configuration</h1>
</header>
<div style="padding: 20pt;">
<h2>Basic Configuration</h2>
<p>Configure the application using the settings file...</p>
<h2>Advanced Options</h2>
<p>For advanced users, additional options are available...</p>
</div>
</section>
Mixing Sections and Articles
<section title="News and Updates">
<header style="padding: 15pt; background-color: #f5f5f5;">
<h1>News and Updates</h1>
<p style="color: #666;">Latest from our team</p>
</header>
<!-- Articles within a section -->
<article title="Update 1" style="margin: 20pt; padding: 15pt; border: 1pt solid #ddd; page-break-before: auto;">
<header>
<h2>New Feature Released</h2>
<p style="font-size: 10pt; color: #666;">October 10, 2025</p>
</header>
<p>We're excited to announce...</p>
</article>
<article title="Update 2" style="margin: 20pt; padding: 15pt; border: 1pt solid #ddd; page-break-before: auto;">
<header>
<h2>Performance Improvements</h2>
<p style="font-size: 10pt; color: #666;">October 8, 2025</p>
</header>
<p>Version 2.0 includes significant performance improvements...</p>
</article>
<article title="Update 3" style="margin: 20pt; padding: 15pt; border: 1pt solid #ddd; page-break-before: auto;">
<header>
<h2>Community Spotlight</h2>
<p style="font-size: 10pt; color: #666;">October 5, 2025</p>
</header>
<p>This month we're highlighting contributions from...</p>
</article>
</section>
See Also
- article - Article element for self-contained content
- div - Generic block container without semantic meaning
- header - Header element for introductory content
- footer - Footer element for closing content
- aside - Aside element for tangentially related content
- nav - Navigation element for navigation links
- Panel Component - Base panel component in Scryber namespace
- PDF Bookmarks - Creating document outlines and bookmarks
- Document Structure - Structuring PDF documents
- Page Breaking - Controlling page breaks in PDFs