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

• From: Jihye Hong via GitHub <sysbot+gh@w3.org>
• Date: Fri, 26 Aug 2016 06:56:39 +0000
• To: public-css-archive@w3.org
• Message-ID: <issues.opened-173382714-1472194597-sysbot+gh@w3.org>

jihyerish has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-round-display][motion-path] Apply offset-path to specify the 
shape of progress element ==
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, I have an idea about specifying the shape of the progress bar 
using offset-path.
For example, for the circular progress bar [2], it could be specified 
by

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

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

Would it be possible to do?



[1]
![image](https://cloud.githubusercontent.com/assets/6636090/17996451/f54deeb8-6ba3-11e6-8727-91601976bb71.png)


[2]  
![image](https://cloud.githubusercontent.com/assets/6636090/17996464/0a102c94-6ba4-11e6-9891-30125e15fba6.png)


Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/429 using your GitHub 
account

Received on Friday, 26 August 2016 06:56:47 UTC