Making a progress bar with the CSS attr function

Question

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 ?

Quentin · Accepted Answer · 2020-10-20 13:58:02Z

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.

Code Reveal · Accepted Answer · 2021-05-04 08:59:05Z

2

Try using the width rule in the style attribute like style="width:50%"

answered May 4, 2021 at 8:59

Code Reveal

314 bronze badges

Comments

Noé · Accepted Answer · 2020-10-20 14:10:56Z

I found another way :

.progress_bar { height: 10px; width: 10cm; background-color: #cae3ff; } .progress { height: inherit; background-color: #0077ff; transition: 1s cubic-bezier(1,0,0,1); }

<div class="progress_bar"> <div class="progress" style="width:80%"></div> </div>

Using the style attribute, instead of creating a new attribute.

Najathi · Accepted Answer · 2022-10-19 10:33:21Z

Try this one.

.progress_bar { height: 10px; width: 10cm; background-color: #cae3ff; } .progress { height: inherit; width: calc(var(--width, 0) * 1%); background-color: #0077ff; transition: 1s cubic-bezier(1,0,0,1); }

<div class="progress_bar"> <div class="progress" style="--width: 80;"></div> </div>

Collectives™ on Stack Overflow

Making a progress bar with the CSS attr function

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related