feat: Progress indicator styling

[Jarsen136]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Needs Design check

• @exezbcz please review

Context

• Closes Progress indicator styling  #6206
• Requires deployment <snek/rubick/worker>

Did your issue had any of the "$" label on it?

• My DOT address: Payout

Screenshot 📸

• My fix has changed UI

Copilot Summary

🤖 Generated by Copilot at 3a315e2

Created a new UnlockableSlider component to replace o-slider and show unlockable progress in UnlockableContainer.vue. This improves the user experience and code organization for the unlockable feature.

🤖 Generated by Copilot at 3a315e2

To show how much progress you've made
o-slider had to be replaced
With UnlockableSlider
A custom provider
Of a better and smoother display

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	3a315e2
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/648a6eab6151aa0008e2a4aa
😎 Deploy Preview	https://deploy-preview-6228--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[kodabot]

SUCCESS @Jarsen136 PR for issue #6206 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[reviewpad]

AI-Generated Summary: This pull request introduces new styling for the progress indicator of the unlockable feature. It includes the creation of a new UnlockableSlider.vue component, which is now used in UnlockableContainer.vue instead of the previous o-slider component. The new slider component has custom styling, including width calculation based on the value prop.

[codeclimate]

Code Climate has analyzed commit 3a315e2 and detected 0 issues on this pull request.

View more on Code Climate.

[roiLeo]

Hello have you heard of progress element

[vikiival]

Hello have you heard of progress element

So can we get some <progress /> on this?

[vikiival]

As pointed out please use progress

[Jarsen136]

Hello have you heard of progress element

I have not heard of it before TBH. However, after I did some search on it, I find that it's not that proper. If we use < progress /> directly, it would work well but the style looks not good. Then If we would like to custom the style of it, there are some problems.
I have to use some of these classes to decorate it, but all of these class are Non-standard and may not work for every browser.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-progress-bar
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value

In short, for now I use two simple

elements to implement the progress component. I guess it's an easy and stable solution.

[yangwao]

pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 4.3 USD/DOT ~ 6.977 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x0972857651429af38f5938ad19726aee65d45dcb7fb8c91a4740041c58920f77

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues