Orange-OpenSource / Orange-OpenSource/Orange-Boosted-Bootstrap

Create component - Progress Indicator

Open
#3,152 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🗳️ feature
Dominant language
CSS
Stars
219
Forks
61
Avg merge
2d 15h
Merged PRs (30d)
12

Description

Prerequisites
Proposal

Description

As a user of the Ouds library
I want to be able to use the component
So that I can add an Ouds Loader component in my own projects

As a user of the library
I want to be able to use the Loader component
So that I have access to the documentation on how to use it and

  • I can see examples of implementations with the available states and customizations
  • I can copy and paste the code of the selected customization for reuse

More information

Investigate factorization opportunities with loaders variants of Buttons and Tags and loading states of inputs
At least the loading animation could be a custom prop https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/3278#discussion_r2623564283
There is also a factorisation opportunity in the documentation https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/3278#discussion_r2626329025

Take a look at Material Web Component implementation since it is what designers wants : https://github.com/material-components/material-web/blob/main/progress/internal/circular-progress.ts . Maybe we could also provide a Web Component to avoid copy/pasting the same dom each time ?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the Material Web Component circular-progress implementation linked in the issue, then investigate loader variants in Buttons and Tags and loading states of inputs. Done means the Progress Indicator or Loader component supports the required states and customizations, with reusable documentation examples and copyable implementation code.

Written by the indexing model from the issue text.

Assessment

Tech stack
bootstrap, css
Domain
design, documentation, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.