Replace <div class="fly-progress"> and its contents with <PlumaProgressBar>.
instead of using a style attribute to control the width, use the @value argument
if the scale of the progress bar is not 100%, use the @max argument to set the maximum value
fly-progress--sm becomes @size="sm"
use @ariaLabel to set a descriptive aria-label for the state of the progress bar
- alternatively, use @ariaLabelledby to set the id of an element that describes the progress bar

Examples

Source:

<div class="fly-progress" role="progressbar" aria-describedby="progress-bar-status">
  <div class="fly-progress-bar" style="width: 90%;">
    <span class="sr-only" id="progress-bar-status">90% Complete</span>
  </div>
</div>

Target:

<PlumaProgressBar @value={{90}} @ariaLabel="90% Complete" />

Source:

<div class="fly-progress fly-progress--sm" role="progressbar" aria-describedby="progress-bar-status">
  <div class="fly-progress-bar" style="width: 30%;">
    <span class="sr-only" id="progress-bar-status">30% Complete</span>
  </div>
</div>

Target:

<PlumaProgressBar @value={{30}} @size="sm" @ariaLabel="30% Complete" />

fly-progress

Source component

Target component

Mapping

Examples

On this page