Css3 renginde veri niteliğini kullanma

Question

Değere bağlı olarak bir ilerleme çubuğunu renklendirmeye çalışıyorum.

progress[value]::-webkit-progress-value { 
    position: relative; 
    background-color: rgba(0, attr(value) ,0,1); 
    background-size: 35px 20px, 100% 100%, 100% 100%; 
    border-radius:3px; 

    /* Let's animate this */ 
    animation: animate-stripes 5s linear infinite; 
} 

Görünüşe göre attr (değer) işe yaramıyor - orada değer enjekte etmenin bir yolu var mı? Kromu kullanma

Answer 1

İlerlemenizi görüntülemek için önce sözde eleman kullanıyorsanız? Belki bu işe yarayabilir?

progress[value]::-webkit-progress-value { 

    &:before{ 
     content: [attr-data]; 
     display: block; 
     position: relative; 
     background-color: rgba(0, attr(value) ,0,1); 
     background-size: 35px 20px, 100% 100%, 100% 100%; 
     border-radius:3px; 

     /* Let's animate this */ 
     animation: animate-stripes 5s linear infinite;  
    } 

}