4 CSS प्रोग्रेस बार आप अपनी वेबसाइट पर उपयोग कर सकते हैं

तन {
फ़ॉन्ट: 13px/20px "लुसीडा ग्रांडे", ताहोमा, वर्दाना, सेन्स-सेरिफ़;
रंग: #404040;
पार्श्वभूमि: #2a2a2a;
}

.कंटेनर {
मार्जिन: 60px ऑटो;
चौड़ाई: 400px;
पाठ-संरेखण: केंद्र;
}

.कंटेनर।प्रगति {
मार्जिन: 0 ऑटो;
चौड़ाई: 400px;
}

।प्रगति {
पैडिंग: 4px;
पार्श्वभूमि: आरजीबीए(0, 0, 0, 0.25);
सीमा-त्रिज्या: 6px;
-वेबकिट-बॉक्स-छाया: इनसेट 0 1पिक्सल 2पिक्सलआरजीबीए(0, 0, 0, 0.25), 0 1पिक्सलआरजीबीए(255, 255, 255, 0.08);
डब्बे की छाया: इनसेट 0 1पिक्सल 2पिक्सलआरजीबीए(0, 0, 0, 0.25), 0 1पिक्सलआरजीबीए(255, 255, 255, 0.08);
}

।प्रगति पट्टी {
ऊंचाई: 16 पीएक्स;
सीमा-त्रिज्या: 4px;
पृष्ठभूमि छवि: -वेबकिट-रैखिक-ढाल(ऊपर, आरजीबीए(255, 255, 255, 0.3), आरजीबीए(255, 255, 255, 0.05));
पृष्ठभूमि छवि: -मोज़-रैखिक-ढाल(ऊपर, आरजीबीए(255, 255, 255, 0.3), आरजीबीए(255, 255, 255, 0.05));
पृष्ठभूमि छवि: -ओ-रैखिक-ढाल(ऊपर, आरजीबीए(255, 255, 255, 0.3), आरजीबीए(255, 255, 255, 0.05));
पृष्ठभूमि छवि: रैखिक ढलान(कोनीचे, आरजीबीए(255, 255, 255, 0

.3), आरजीबीए(255, 255, 255, 0.05));
-webkit-संक्रमण: 0.4sरैखिक;
-moz-संक्रमण: 0.4sरैखिक;
-ओ-संक्रमण: 0.4sरैखिक;
संक्रमण: 0.4sरैखिक;
-वेबकिट-संक्रमण-संपत्ति: चौड़ाई, पृष्ठभूमि-रंग;
-मोज़-संक्रमण-संपत्ति: चौड़ाई, पृष्ठभूमि-रंग;
-ओ-संक्रमण-संपत्ति: चौड़ाई, पृष्ठभूमि-रंग;
संक्रमण-संपत्ति: चौड़ाई, पृष्ठभूमि-रंग;
-वेबकिट-बॉक्स-छाया: 0 0 1पिक्सल 1पिक्सलआरजीबीए(0, 0, 0, 0.25), इनसेट 0 1पिक्सलआरजीबीए(255, 255, 255, 0.1);
डब्बे की छाया: 0 0 1पिक्सल 1पिक्सलआरजीबीए(0, 0, 0, 0.25), इनसेट 0 1पिक्सलआरजीबीए(255, 255, 255, 0.1);
}

#पंज:चेक किया गया ~ ।प्रगति &जीटी; ।प्रगति पट्टी {
चौड़ाई: 5%;
पीछे का रंग: #f63a0f;
}

#पच्चीस:चेक किया गया ~ ।प्रगति &जीटी; ।प्रगति पट्टी {
चौड़ाई: 25%;
पीछे का रंग: #f27011;
}

#पचास:चेक किया गया ~ ।प्रगति &जीटी; ।प्रगति पट्टी {
चौड़ाई: 50%;
पीछे का रंग: #f2b01e;
}

#पचहत्तर:चेक किया गया ~ ।प्रगति &जीटी; ।प्रगति पट्टी {
चौड़ाई: 75%;
पीछे का रंग: #f2d31b;
}

#एक सौ:चेक किया गया ~ ।प्रगति &जीटी; ।प्रगति पट्टी {
चौड़ाई: 100%;
पीछे का रंग: #86e01e;
}

हो.रेडियो {
कुछ भी डिस्प्ले मत करो;
}

।लेबल {
प्रदर्शन: इनलाइन-ब्लॉक;
मार्जिन: 0 5px 20px;
पैडिंग: 3px 8px;
रंग: #आआ;
पाठ-छाया: 0 1px काला;
सीमा-त्रिज्या: 3px;
कर्सर: सूचक;
}