[css-round-display][motion-path] Apply offset-path to specify the shape of progress element

[jihyerish]

There are various shapes of progress bar used in the smart watch and the car dash board. [1] To implement those kinds of progress bar, generally there are 2 ways.

• Using SVG elements
  • eg) https://css-tricks.com/svg-line-animation-works/
• Using border-radius
  • eg) http://codepen.io/cliffpyles/pen/xbsiC

But those ways have poor performance to be applied in the smart watch and cause complicated and lots of code lines.

So there are requests to solve this problem from developers in LG, other manufacturing companies like Samsung. Samsung has their own API to implement the circle progress component. [2]

I have an idea about specifying the shape of the progress bar using offset-path. I suggest a new pseudo element, '::path' which can transform the shape of the progress element. When the pseudo element is applied, the path specified by 'offset-path' decides the shape of the element.

For example, for the circular progress bar [3], it could be specified like:

HTML: < progress value=“30" max=“100" >

CSS: progress ::path{ offset-path: circle(100px); /* circle of radius 100px */ }

Would it be possible to do?

[1]

[2] CircleProgressBar component in Samsung Tizen API https://developer.tizen.org/development/api-references/web-application?redirect=/dev-guide/2.4/org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_circleprogressbar.htm

[3]

[jihyerish]

@shans What do you think of this idea? Is there another way to do this?

[atanassov]

CSSWG Call decision: There wasn't interest in creating a new pseudo-element at this time. Exploration should focus around custom elements and any problems in the implementation of SVG that is causing it not to be performant.

https://lists.w3.org/Archives/Public/www-style/2016Sep/0028.html