W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2016

[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 

== [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 

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

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

Would it be possible to do?



Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/429 using your GitHub 
Received on Friday, 26 August 2016 06:56:47 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:01 UTC