progress
Use native progress. Compose its label and value with native label and
output elements when needed.
<div>
<label id="upload-progress-label">Upload progress</label>
<output>56%</output>
<progress
value="56"
max="100"
aria-labelledby="upload-progress-label"
></progress>
</div>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Progress</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
<script src="../../js/progress-demo.umd.js"></script>
</head>
<body
ng-app="progressDemo"
ng-controller="ProgressDemoController"
ng-cloak
data-example="progress-demo progress-label"
>
<main class="visual-example">
<section aria-labelledby="progress-timed-title">
<h2 id="progress-timed-title" class="visually-hidden">
Loading progress
</h2>
<progress
value="{{ demoValue }}"
max="100"
aria-labelledby="progress-timed-title"
class="progress-demo-timed"
></progress>
</section>
<section>
<div class="progress-demo-labeled">
<label id="upload-progress-label"> Upload progress </label>
<output for="upload-progress">56%</output>
<progress
id="upload-progress"
value="56"
max="100"
aria-labelledby="upload-progress-label"
></progress>
</div>
</section>
</main>
</body>
</html>
Controlled and RTL
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Progress Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="progressWorkflow={controlled:50}"
data-example="progress-controlled progress-rtl"
>
<main class="progress-workflows visual-example">
<section aria-labelledby="progress-controlled-title">
<div class="workflow-heading">
<h2 id="progress-controlled-title">Controlled</h2>
<output for="progress-controlled-slider">
{{ progressWorkflow.controlled }}%
</output>
</div>
<progress
value="{{ progressWorkflow.controlled }}"
max="100"
aria-labelledby="progress-controlled-title"
></progress>
<input
ng-range-slider
id="progress-controlled-slider"
type="range"
min="0"
max="100"
step="1"
ng-model="progressWorkflow.controlled"
aria-label="Progress value"
/>
</section>
<section lang="ar">
<div dir="rtl">
<label id="rtl-upload-progress-label"> تقدم الرفع </label>
<output for="rtl-upload-progress">٥٦%</output>
<progress
id="rtl-upload-progress"
value="56"
max="100"
aria-labelledby="rtl-upload-progress-label"
></progress>
</div>
</section>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native progress semantics and state.
Anatomy
Root styling selector
progress
Semantic structure
Use a native progress element. For a visible label and value, place direct native label, output, and progress children in one div; AngularCSS recognizes that semantic structure without another class.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
dir | Authored | Text and interaction direction: ltr or rtl. |
max | Authored | Maximum native or component value. |
value | Authored | Native value or authored component value. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
The native progress element owns progressbar semantics and determinate or indeterminate state. Native label and output elements provide optional context. AngularTS may bind value; AngularCSS registers no progress directive.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Give every native progress element an accessible name with label, aria-label, or aria-labelledby. Set value and max for determinate progress; omit value for indeterminate progress.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.