[calcite-loader] Allow a way to display percent sign on the determinate value

[rpanichakit9541]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

Currently the value of the determinate loader just displays as a number which the user can mistake as the count number of items done instead of the percentage of completion. This is a request to be able to set a prop to tell the calcite-loader component to display the percent sign next to the number value.

Acceptance Criteria

The user should be able to set a prop on the calcite-loader component to tell it to display a percent sign next to the percent value

Relevant Info

No response

Which Component

calcite-loader

Example Use Case

No response

Priority impact

p4 - not time sensitive

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[mpriour]

This issue is now impacting us in ArcGIS Online. We would really like this enhancement before the fall release of ArcGIS Online if at all possible.

[geospatialem]

For design expertise 🧠 : Should we also support the "%" when the value is 100?

[geospatialem]

Discussed the above with Skye, where they recommend the following:

We should always display the percentage for the value, even when the value is at 100%. However, it is recommended once the component reaches 100% to remove the loading state.

Additionally, in looking at other design systems, which use a circular progress similar to our determinate loader, it is common to not have the percentage by default, so we should explore adding the percentage as a new property.

Resources:

• https://v2.chakra-ui.com/docs/components/circular-progress
• https://quasar.dev/vue-components/circular-progress
• https://design.wonderflow.ai/get-started/components/loading/circular-progress

[github-actions[bot]]

cc @geospatialem, @brittneytewks