4 أشرطة تقدم CSS يمكنك استخدامها على موقع الويب الخاص بك

هيئة {
الخط: 13 بكسل / 20 بكسل "لوسيدا غراندي"، Tahoma، Verdana، sans-serif؛
اللون: #404040;
معرفتي: # 2a2a2a ؛
}

.حاوية {
الهامش: 60 بكسل تلقائي ؛
العرض: 400 بكسل ؛
محاذاة النص: مركز ؛
}

.حاوية.تقدم {
الهامش: 0 تلقائي ؛
العرض: 400 بكسل ؛
}

.تقدم {
الحشو: 4 بكسل ؛
معرفتي: rgba(0, 0, 0, 0.25);
نصف قطر الحدود: 6 بكسل ؛
-webkit-box-shadow: أقحم 0 1مقصف 2مقصفrgba(0, 0, 0, 0.25), 0 1مقصفrgba(255, 255, 255, 0.08);
مربع الظل: أقحم 0 1مقصف 2مقصفrgba(0, 0, 0, 0.25), 0 1مقصفrgba(255, 255, 255, 0.08);
}

.شريط التقدم {
الارتفاع: 16 بكسل ؛
نصف قطر الحدود: 4 بكسل ؛
الصورة الخلفية: -مجموعة ويب- التدرج الخطي(أعلى, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
الصورة الخلفية: -موز-التدرج الخطي(أعلى, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
الصورة الخلفية: - التدرج الخطي(أعلى, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
الصورة الخلفية: الخطي التدرج(لالأسفل, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0

.05));
-webkit- الانتقال: 0.4 ثانيةخطي;
-موز-الانتقال: 0.4 ثانيةخطي;
-o- الانتقال: 0.4 ثانيةخطي;
انتقال: 0.4 ثانيةخطي;
-webkit-transfer-property: العرض ، لون الخلفية ؛
-موز-خاصية الانتقال: العرض ، لون الخلفية ؛
- خاصية الانتقال: العرض ، لون الخلفية ؛
خاصية الانتقال: العرض ، لون الخلفية ؛
-webkit-box-shadow: 0 0 1مقصف 1مقصفrgba(0, 0, 0, 0.25), أقحم 0 1مقصفrgba(255, 255, 255, 0.1);
مربع الظل: 0 0 1مقصف 1مقصفrgba(0, 0, 0, 0.25), أقحم 0 1مقصفrgba(255, 255, 255, 0.1);
}

#خمسة:التحقق ~ .تقدم &جي تي; .شريط التقدم {
العرض: 5٪؛
لون الخلفية: # f63a0f ؛
}

#خمسة وعشرين:التحقق ~ .تقدم &جي تي; .شريط التقدم {
العرض: 25٪؛
لون الخلفية: # f27011 ؛
}

#خمسون:التحقق ~ .تقدم &جي تي; .شريط التقدم {
العرض: 50٪؛
لون الخلفية: # f2b01e ؛
}

#خمسة وسبعون:التحقق ~ .تقدم &جي تي; .شريط التقدم {
العرض: 75٪؛
لون الخلفية: # f2d31b ؛
}

#مائة:التحقق ~ .تقدم &جي تي; .شريط التقدم {
العرض: 100٪؛
لون الخلفية: # 86e01e ؛
}

.مذياع {
عرض لا شيء؛
}

.ضع الكلمة المناسبة {
عرض: مضمنة كتلة ؛
الهامش: 0 5 بكسل 20 بكسل ؛
الحشو: 3 بكسل 8 بكسل ؛
اللون: #aaa ؛
ظل النص: 0 1 بكسل أسود ؛
نصف قطر الحدود: 3 بكسل ؛
المؤشر: المؤشر.
}