Circular progress indicator

[srambach]

@garrett proposes a circular progress indicator - details below. What other products would have a use case for this?

We (@ Cockpit) happened upon the need to have a circular progress indicator and, related, a progress spinner that shows progress (instead of being indeterminate) and didn't see anything like that within PatternFly. (There are donut charts, but they're overkill and don't really address the need properly.) Therefore, I made an experiment that's 1 DOM element and some CSS with a custom property for a "widget" that would serve both needs. It can be embedded in a button, stand alone, restricted to a size, or fill its parent (depending on where and how it's needed). Demo @ https://codepen.io/garrett/pen/ZEwJPdp

[garrett]

Screenshot of the mockup:

[tejaskh3]

Hey hi @garrett, hope you are well. This is Tejas a javascript developer, I also want to contribute for patternfly but unable to find contribution guidlines or how should we setup this project, can you please tell me where can i find that or should i setup it myself?
Thanks and regards
I have found it thanks.

[garrett]

I have found it thanks.

Excellent!

(I guess you saw https://www.patternfly.org/get-started/contribute/developer-contributions, https://github.com/patternfly/patternfly#guidelines-for-css-development, and https://www.patternfly.org/get-started/develop ?)

[garrett]

Also, please note that the demo I made is using different naming conventions; when adapted for PatternFly, it would need to use PatternFly naming and variables, including standard PatternFly colors. (I didn't pull in PatternFly for the demo, it's standalone.)

[garrett]

The example code is all in .progres-pie; the rest is how it'd work when enclosed with wrappers (which would be elements in your PatternFly UI, such as a button, toolbar, and so on).

.progress-pie {
  --progress-fill: #333;
  --progress-empty: #ccc;
  /* Width can be set to 100% for a filled circle or to any units, including px */
  --progress-width: 40%;
  /* Size from the edge, add a px for antialiasing */
  --mask-image: radial-gradient(
    circle farthest-side,
    transparent calc(100% - var(--progress-width)),
    black calc(100% - var(--progress-width) + 1px)
  );

  aspect-ratio: 1 / 1;
  border-radius: 100%;
  display: inline-block;
  height: 100%;
  min-height: 16px;
  /* Multiply by a float for a bit of anti-aliasing, while preserving 0% and 100% */
  background: conic-gradient(
    var(--progress-fill) var(--progress, 0),
    var(--progress-empty) calc(var(--progress, 0) * 1.005)
  );
  mask-image: var(--mask-image);
  -webkit-mask-image: var(--mask-image);
}

This would be adjusted to for PatternFly naming conventions and so on.

[garrett]

Also: Apologies for developing it on the development version of Chrome (instead of stable) and not realizing that Chrome has been lagging behind both Firefox and Safari (yet again). Anway, it's now fixed with the duplication with a prefixed mask-image. 😉