सीएसएस 3 रंग

Question

में डेटा विशेषता का उपयोग करके मैं मूल्य के आधार पर एक प्रगति पट्टी रंग देने की कोशिश कर रहा हूं।

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; 
} 

ऐसा लगता है जैसे attr (value) काम नहीं करता है - क्या वहां मूल्य लगाने का कोई तरीका है? क्रोम

Answer 1

का उपयोग करना यदि आप अपनी प्रगति को प्रदर्शित करने से पहले छद्म तत्व का उपयोग करते हैं? शायद यह काम कर सकता है?

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;  
    } 

}