Search code examples
htmlcssattr

Making a progress bar with the CSS attr function

I'm trying to make a progress bar with the CSS attr function, here is my code :

.progress_bar {
  height: 10px;
  width: 10cm;
  background-color: #cae3ff;
}

.progress {
  height: inherit;
  width: attr(progress);
  background-color: #0077ff;
  transition: 1s cubic-bezier(1,0,0,1);
}
<div class="progress_bar">
  <div class="progress" progress="80%"></div>
</div>

As you can see by running the code snippet, the bar doesn't work, I read the docs about the attr function and still I don't find the problem, could you help me please ?

Solution

  • attr() was originally intended for use with the content property and support for it there is good.

    CSS Values and Units Module Level 4 adds support for any property (such as width), but that specification is currently a Working Draft and browser support is non-existent.