Progress

Show the state of something with the progress component of FlatifyCSS, it has its custom HTML, this is not a <progress> because customizing it is kind of a mess so we create our custom progress.

Simple progress examples

To have a progress component we must have two elements: .progress and inside it a .progress-bar element.
Note that the progress bar should be styled by its share for example if 25% of the job is done you should set width: 25% or use width setter helper classes.

Accessibility matters!

We have a custom progress component with the custom HTML structure, by default they are just some <div>s, so they do not make sense for accessibility.

A comprehensive progress bar must have these attributes:
role="progressbar" for progress bar element to define it is the progress bar.
aria-valuenow="0" it is the same as <progress value="0"> that should be added to the progress bar.
aria-valuemin="0" & aria-valuemax="100" like <progress min="0" max="100">

index.html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress">
  <div class="progress-bar width-75p" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress" style="margin-bottom: 0">
  <div class="progress-bar flex-center" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    Loading...
  </div>
</div>

Processing

There is a class called .processing for adding the effect that the work is in progress.

index.html

<div class="progress processing">...</div>

Bordered

By default progress does not have a border, but you can have it by adding the .bordered class.

index.html

<div class="progress bordered">...</div>

Sizes

To change the progress size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<div class="progress size-xs">...</div>
<div class="progress size-lg">...</div>
<div class="progress processing size-3x">...</div>

Colors

There are helper classes for styling elements like progress, first read about color setter classes.

Customization

Each progress has these CSS variables for customization, they can be set as :root for all progress components default style or just for a specific selector.

--flatify__progress-bg-color
--flatify__progress-txt-color
--flatify__progress-border-color
--flatify__progress-animation-duration

The progress bar uses accent color as the background color which can be customized with:

--flatify__color-accent-primary for progress bar background color.
--flatify__color-accent-light for progress bar processing state element background color.

index.html

<div class="progress my-custom-progress-bar">
  <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress processing my-custom-progress-bar">
  <div class="progress-bar width-75p" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress processing bordered my-custom-progress-bar" style="margin-bottom: 0">
  <div class="progress-bar width-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    25%
  </div>
</div>

style.css

.my-custom-progress-bar {
  --flatify__color-accent-primary: linear-gradient(to right, #8a2387, #e94057, #f27121);
  --flatify__color-accent-light: rgba(255, 255, 255, 0.75);
  --flatify__progress-bg-color: #f5f7fa;
  --flatify__progress-txt-color: #fff;
  --flatify__progress-border-color: #f0c2ee;
  --flatify__progress-animation-duration: 1s;
}