feat(loader,progress-circle): NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle by francisrupert · Pull Request #1102 · dialpad/dialtone

Francis Rupert (francisrupert) · 2026-03-04T22:23:02Z

🛠️ Type Of Change

Feature

📖 Jira Ticket

NO-JIRA

📖 Description

Added stroke-linecap="round" to DtProgressCircle fill shape
Polished DtProgressCircle stroke rendering with rounded linecaps and minimum visual thresholds
Replaced DtIconLoading icon import in DtLoader with an inline SVG spinner arc that visually aligns with DtProgressCircle
Added a comet-fade conic-gradient mask to the loader icon so the leading edge fades to transparent

💡 Context

After landing the DtProgressCircle component, we aligned DtLoader (the indeterminate spinner) to use a matching SVG arc so the two components share a consistent visual language. The loader also gains a comet-tail fade effect via a CSS mask for a more polished spin animation.

📦 Cross-Package Impact

Package	Changes	Downstream Impact
dialtone-css	Updated loader.less, progress_circle.less	Vue components depend on these styles
dialtone-vue	Updated DtLoader SVG, polished DtProgressCircle	---

📝 Checklist

For all PRs:

I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
I have reviewed my changes.
I have added all relevant documentation.
I have considered the performance impact of my change.

For all Vue changes:

I have added / updated unit tests.
I have validated components with a screen reader.
I have validated components keyboard navigation.

For all CSS changes:

I have used design tokens whenever possible.
I have considered how this change will behave on different screen sizes.
I have visually validated my change in light and dark mode.
I have used gap or flexbox properties for layout instead of margin whenever possible.

🔮 Next Steps

Validate comet-fade visually in light and dark mode across all loader sizes

Screen.Recording.2026-03-04.at.4.26.47.PM.mov

Screen.Recording.2026-03-04.at.4.31.47.PM.mov

…d scale of DtProgressCircle

github-actions · 2026-03-04T22:23:18Z

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

Francis Rupert (francisrupert)

A few notes.

Brad Paugh (braddialpad)

Nice! much prettier

…k and fill paths

Brad Paugh (braddialpad) · 2026-03-04T23:09:01Z

Seems like there's a problem with the Progress Circle usage in Attachment Carousel

Francis Rupert (francisrupert) · 2026-03-04T23:17:52Z

Seems like there's a problem with the Progress Circle usage...

eek. will probe. EDIT: oh, it's using var(--dt-color-neutral-white) on carousel css.

Francis Rupert (francisrupert) · 2026-03-04T23:40:54Z

Seems like there's a problem with the Progress Circle usage...

Tweaked colors in attachement_carousel.less. There's a lot about that component that should still be polished, but good for now.

…d hover states

github-actions · 2026-03-04T23:53:16Z

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1102/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1102/

Brad Paugh (braddialpad)

That looks awesome thanks!

# [8.74.0-next.3](dialtone-css/v8.74.0-next.2...dialtone-css/v8.74.0-next.3) (2026-03-05) ### Features * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

# [3.211.0-next.1](dialtone-vue/v3.210.0...dialtone-vue/v3.211.0-next.1) (2026-03-05) ### Bug Fixes * **Combobox:** DLT-3057 combobox errors when hovering over dt-dropdown-separator ([#1097](#1097)) ([4798e0e](4798e0e)) ### Code Refactoring * **Combobox Multi Select:** NO-JIRA use logical css properties ([#1104](#1104)) ([a675daf](a675daf)) * **Components,recipes:** DLT-3043 DLT-3046 logical start/end naming with deprecated backward-compatible fallbacks ([#1079](#1079)) ([1d26a4e](1d26a4e)) * **Tokens:** DLT-3013 convert color system from HSL to OKLCH ([#1060](#1060)) ([42dc418](42dc418)) ### Features * **Avatar:** DLT-2942 updated avatar component ([#1047](#1047)) ([e50563d](e50563d)) * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **Link,button:** DLT-3012 add underline prop ([#1059](#1059)) ([1cb91ea](1cb91ea)) * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) * **Text:** export text component from dialtone-vue ([757fdb7](757fdb7)) * **Tokens:** DLT-2937 introduce spacing and layout token systems ([#1045](#1045)) ([de23e12](de23e12)) * **Tokens:** update color ramps and consumer color migration tools DLT-3004 DLT-3005 DLT-3006 DLT-3007 DLT-3008 ([#1054](#1054)) ([28cb1de](28cb1de)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

# [9.167.0-next.1](dialtone/v9.166.0...dialtone/v9.167.0-next.1) (2026-03-05) ### Bug Fixes * **Combobox:** DLT-3057 combobox errors when hovering over dt-dropdown-separator ([#1097](#1097)) ([4798e0e](4798e0e)) * **Doc:** NO-JIRA correct font size utility json ([#1015](#1015)) ([76cf0fa](76cf0fa)) * possible merge issue in sidebarItem.vue ([5e2e91b](5e2e91b)) * **Stylelint:** disable hue-degree-notation rule and update OKLCH color syntax ([81f886e](81f886e)) * **Stylelint:** disable hue-degree-notation rule and update OKLCH color syntax ([8721f43](8721f43)) * **Tokens:** DLT-3053 preserve root font size variable as reference ([#1093](#1093)) ([112ab4b](112ab4b)) * **Tokens:** handle multi-layer box shadows correctly in postcss plugin ([feea7f1](feea7f1)) * **Tokens:** NO-JIRA output line-height as unitless instead of percentages ([#1040](#1040)) ([33d8505](33d8505)) * **Tokens:** wrap css math expressions with calc() in layered build ([#966](#966)) ([1635f61](1635f61)) * update @dialpad/i18n dependencies to latest versions ([7a4b777](7a4b777)) ### Code Refactoring * **Combobox Multi Select:** NO-JIRA use logical css properties ([#1104](#1104)) ([a675daf](a675daf)) * **Components,recipes:** DLT-3043 DLT-3046 logical start/end naming with deprecated backward-compatible fallbacks ([#1079](#1079)) ([1d26a4e](1d26a4e)) * **Css:** DLT-1876 css logical properties ([#872](#872)) ([1acd6c9](1acd6c9)) * **Style:** DLT-3014 wrap all styles in css cascade layers ([#1061](#1061)) ([f8b3fed](f8b3fed)) * **Text:** DLT-2883 rename headline sizes from xxl => 2xl, etc ([#1029](#1029)) ([0ac86f3](0ac86f3)) * **Tokens:** DLT-2884 deprecate space tokens in favor of size tokens ([#1013](#1013)) ([63f6d2f](63f6d2f)) * **Tokens:** DLT-3013 convert color system from HSL to OKLCH ([#1060](#1060)) ([42dc418](42dc418)) ### Documentation * DLT-1510 DLT-1511 DLT-1512 site redesign and ia ([#968](#968)) ([6ea7eb9](6ea7eb9)) * DLT-2908 ui kits landing page ([#1049](#1049)) ([d805b9d](d805b9d)) ### Features * **Avatar:** DLT-2942 updated avatar component ([#1047](#1047)) ([e50563d](e50563d)) * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **Css Utility:** DLT-2715 add default color for border css utilities ([#874](#874)) ([71310ab](71310ab)) * **Filter Pill:** DLT-2704 create component ([#473](#473)) ([6267445](6267445)) * **Link,button:** DLT-3012 add underline prop ([#1059](#1059)) ([1cb91ea](1cb91ea)) * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) * **Style:** DLT-2976 update underline thickness and offset ([#1058](#1058)) ([1e56947](1e56947)) * **Text:** export text component from dialtone-vue ([757fdb7](757fdb7)) * **Text:** new vue component DLT-2864 DLT-2863 DLT-2862 ([#995](#995)) ([196ef8a](196ef8a)) * **Tokens:** DLT-1977 add high contrast design tokens and theme ([#938](#938)) ([a1c0457](a1c0457)) * **Tokens:** DLT-2767 exploratory shell themes ([#909](#909)) ([3afcf63](3afcf63)) * **Tokens:** DLT-2781 create color-assistive themes ([#921](#921)) ([a6cc397](a6cc397)) * **Tokens:** DLT-2802 DLT-2563 layered theming system and mode island component ([#945](#945)) ([5c72c6c](5c72c6c)) * **Tokens:** DLT-2937 introduce spacing and layout token systems ([#1045](#1045)) ([de23e12](de23e12)) * **Tokens:** update color ramps and consumer color migration tools DLT-3004 DLT-3005 DLT-3006 DLT-3007 DLT-3008 ([#1054](#1054)) ([28cb1de](28cb1de)) * **Typography, Tokens:** DLT-2856 DLT-2857 next typography system ([#994](#994)) ([d744e97](d744e97)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

# [8.74.0](dialtone-css/v8.73.0...dialtone-css/v8.74.0) (2026-03-06) ### Features * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

# [3.211.0](dialtone-vue/v3.210.0...dialtone-vue/v3.211.0) (2026-03-06) ### Bug Fixes * **Combobox:** DLT-3057 combobox errors when hovering over dt-dropdown-separator ([#1097](#1097)) ([4798e0e](4798e0e)) * **Tooltip:** NO-JIRA add Shadow DOM support for DtTooltipDirective ([#1100](#1100)) ([121ffa2](121ffa2)) ### Code Refactoring * **Progress Circle:** NO-JIRA update ai gradient with css variables and fewer stops ([#1105](#1105)) ([8dd19ea](8dd19ea)) ### Features * **Editor:** NO-JIRA added props allowBackgroundColor & allowLineHeight ([#1103](#1103)) ([7c90308](7c90308)) * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

# [9.167.0](dialtone/v9.166.0...dialtone/v9.167.0) (2026-03-06) ### Bug Fixes * **Combobox:** DLT-3057 combobox errors when hovering over dt-dropdown-separator ([#1097](#1097)) ([4798e0e](4798e0e)) * **Tooltip:** NO-JIRA add Shadow DOM support for DtTooltipDirective ([#1100](#1100)) ([121ffa2](121ffa2)) ### Code Refactoring * **Progress Circle:** NO-JIRA update ai gradient with css variables and fewer stops ([#1105](#1105)) ([8dd19ea](8dd19ea)) ### Features * **Editor:** NO-JIRA added props allowBackgroundColor & allowLineHeight ([#1103](#1103)) ([7c90308](7c90308)) * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

Francis Rupert (francisrupert) added 4 commits March 4, 2026 16:21

add stroke-linecap="round" to progress circle fill shape

4737ef5

polish stroke rendering with rounded linecaps and visual thresholds

2ea3693

replace DtIconLoading with inline SVG spinner icon, aligns to size an…

fdcefe7

…d scale of DtProgressCircle

coment fade effect to loader icon

e967ad4

Francis Rupert (francisrupert) self-assigned this Mar 4, 2026

Francis Rupert (francisrupert) changed the title ~~feat(loader,progress-circle): NO-JIRA polish DtProgressCircle details and align DtLoader visual with DtProgressCircle~~ feat(loader,progress-circle): NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle Mar 4, 2026

Francis Rupert (francisrupert) mentioned this pull request Mar 4, 2026

revert: NO-JIRA revert progress circle polish commits for re-PR #1101

Merged

1 task

Francis Rupert (francisrupert) commented Mar 4, 2026

View reviewed changes

Francis Rupert (francisrupert) marked this pull request as ready for review March 4, 2026 22:46

Francis Rupert (francisrupert) requested review from Brad Paugh (braddialpad), Ignacio Ropolo (iropolo) and Nina Repetto (ninarepetto) as code owners March 4, 2026 22:46

Francis Rupert (francisrupert) added the no-visual-test Add this tag when the PR does not need visual testing label Mar 4, 2026

Brad Paugh (braddialpad) requested changes Mar 4, 2026

View reviewed changes

Comment thread packages/dialtone-vue/components/loader/loader.vue

Comment thread packages/dialtone-vue/components/progress_circle/progress_circle.vue Outdated

Comment thread packages/dialtone-vue/components/progress_circle/progress_circle.vue Outdated

Francis Rupert (francisrupert) added 2 commits March 4, 2026 17:04

replace display style with v-if conditionals for progress circle trac…

1bd9b79

…k and fill paths

remove getTotalLength mock and add progress prop to ai kind test

81e4e70

Francis Rupert (francisrupert) added 3 commits March 4, 2026 17:44

update attachment carousel styles to use semantic color tokens and ad…

31afec5

…d hover states

carousel progress circle size

8a8a17d

duh

22f478a

Francis Rupert (francisrupert) requested a review from Brad Paugh (braddialpad) March 4, 2026 23:50

Brad Paugh (braddialpad) approved these changes Mar 5, 2026

View reviewed changes

Francis Rupert (francisrupert) merged commit 7b9e9b6 into staging Mar 5, 2026
18 checks passed

Francis Rupert (francisrupert) deleted the improve-progress-circle-visuals branch March 5, 2026 01:11

Francis Rupert (francisrupert) mentioned this pull request Mar 8, 2026

feat(button): DLT-3086 update loading state to use dt-loader component #1111

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(loader,progress-circle): NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle#1102

feat(loader,progress-circle): NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle#1102
Francis Rupert (francisrupert) merged 9 commits intostagingfrom
improve-progress-circle-visuals

Francis Rupert (francisrupert) commented Mar 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

Francis Rupert (francisrupert) left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Brad Paugh (braddialpad) left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Brad Paugh (braddialpad) commented Mar 4, 2026

Uh oh!

Francis Rupert (francisrupert) commented Mar 4, 2026 •

edited

Loading

Uh oh!

Francis Rupert (francisrupert) commented Mar 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

Brad Paugh (braddialpad) left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Francis Rupert (francisrupert) commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠️ Type Of Change

📖 Jira Ticket

📖 Description

💡 Context

📦 Cross-Package Impact

📝 Checklist

🔮 Next Steps

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

Francis Rupert (francisrupert) left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Brad Paugh (braddialpad) left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Brad Paugh (braddialpad) commented Mar 4, 2026

Uh oh!

Francis Rupert (francisrupert) commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Francis Rupert (francisrupert) commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

Brad Paugh (braddialpad) left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Francis Rupert (francisrupert) commented Mar 4, 2026 •

edited

Loading

Francis Rupert (francisrupert) commented Mar 4, 2026 •

edited

Loading

Francis Rupert (francisrupert) commented Mar 4, 2026 •

edited

Loading