مع إضافة من ادوات بلوجر الخاصة بك في وقت واحد من هنا والثانية من هنا ، وكل واحد وذوقه عامة إضافة اليوم تختلف كليا عن سابقاتها ما يميزها خفيفة جدلة بشكل جيد مرتكزة على تصميم Css و jQuery فقط ، مع ثلاثة عشر شكل مختلف لكل عفاقة مثل شريط الفئران
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl + F عن <head />
3. ضع الكود التالي فوقه
الستيلات / أشكال اشرطة التحميلالستايل الأول
.pace .pace-progress {
الخلفية: # e14e42 ؛
الموقع: ثابت
ض مؤشر: 2000 ؛
أعلى: 0 ؛
اليسار: 0 ؛
الارتفاع: 2px؛
-webkit-transition: width 1s؛
-moz-transition: width 1s؛
-o-transition: width 1s؛
الانتقال: عرض 1s.
}
.pace-inactive {
عرض لا شيء؛
}
.سرعة {
أحداث -webkit- المؤشر: لا شيء ؛
أحداث المؤشر: لا شيء ؛
-webkit-user-select: لا يوجد؛
-moz-user-select: لا يوجد
اختيار المستخدم: لا شيء ؛
}
.pace-inactive {
عرض لا شيء؛
}
.pace .pace-progress {
الخلفية: # 29d؛
الموقع: ثابت
ض مؤشر: 2000 ؛
أعلى: 0 ؛
اليسار: 0 ؛
الارتفاع: 2px؛
-webkit-transition: width 1s؛
-moz-transition: width 1s؛
-o-transition: width 1s؛
الانتقال: عرض 1s.
}
.pace .pace-progress-inner {
العرض محجوب؛
الموقع: مطلقة
right: 0px؛
العرض: 100 بكسل
الارتفاع: 100٪ ؛
box-shadow: 0 0 10px # 29d، 0 0 5px # 29d؛
opacity: 1.0؛
-webkit-transform: rotate (3deg) translate (0px، -4px)؛
-moz-transform: rotate (3deg) translate (0px، -4px)؛
-ms-transform: rotate (3deg) translate (0px، -4px)؛
-o-transform: rotate (3deg) translate (0px، -4px)؛
transform: rotate (3deg) translate (0px، -4px)؛
}
.pace .pace-activity {
العرض محجوب؛
الموقع: ثابت
ض مؤشر: 2000 ؛
العلوي: 15 بكسل ؛
right: 15px؛
العرض: 14 بكسل
الارتفاع: 14 بكسل
border: solid 2px transparent؛
border-top-color: # 29d؛
border-left-color: # 29d؛
border-radius: 10px؛
-webkit-animation: speed-spinner 400ms linin infinite؛
-moz-animation: speed-spinner 400ms linin infinite؛
-ms-animation: speed-spinner 400ms خطي لانهائي؛
-o-animation: speed-spinner 400ms linin infinite؛
الرسوم المتحركة: وتيرة - الدوار 400ms خطي لانهائية.
}
@ -webkit-keyframes pace-spinner {
0٪ {-webkit-transform: rotate (0deg)؛ تحويل: تدوير (0deg) ؛ }
100٪ {-webkit-transform: rotate (360deg)؛ تحويل: تدوير (360deg) ؛ }
}
@ -moz-keyframes pace-spinner {
0٪ {-moz-transform: rotate (0deg)؛ تحويل: تدوير (0deg) ؛ }
100٪ {-moz-transform: rotate (360deg)؛ تحويل: تدوير (360deg) ؛ }
}
@ -o-keyframes pace-spinner {
0٪ {-o-transform: rotate (0deg)؛ تحويل: تدوير (0deg) ؛ }
100٪ {-o-transform: rotate (360deg)؛ تحويل: تدوير (360deg) ؛ }
}
@ -ms-keyframes pace-spinner {
0٪ {-ms-transform: rotate (0deg)؛ تحويل: تدوير (0deg) ؛ }
100٪ {-ms-transform: rotate (360deg)؛ تحويل: تدوير (360deg) ؛ }
}
keyframes pace-spinner {
0٪ {transform: rotate (0deg)؛ تحويل: تدوير (0deg) ؛ }
100٪ {transform: rotate (360deg)؛ تحويل: تدوير (360deg) ؛ }
}
.سرعة {
أحداث -webkit- المؤشر: لا شيء ؛
أحداث المؤشر: لا شيء ؛
-webkit-user-select: لا يوجد؛
-moz-user-select: لا يوجد
اختيار المستخدم: لا شيء ؛
}
.pace-inactive {
عرض لا شيء؛
}
.pace .pace-progress {
لون الخلفية: # 29d؛
الموقع: ثابت
ض مؤشر: 2000 ؛
أعلى: 0 ؛
اليسار: 0 ؛
الارتفاع: 12 بكسل
إخفاء الفائض؛
-webkit-transition: width 1s؛
-moz-transition: width 1s؛
-o-transition: width 1s؛
الانتقال: عرض 1s.
}
.pace .pace-progress-inner {
الموقع: مطلقة
أعلى: 0 ؛
اليسار: 0 ؛
right: -32px؛
أسفل: 0 ؛
background-image: -webkit-gradient (linear، 0 100٪، 100٪ 0، color-stop (0.25، rgba (255، 255، 255، 0.2))، color-stop (0.25، transparent)، color-stop ( 0.5 ، شفاف) ، توقف اللون (0.5 ، rgba (255 ، 255 ، 255 ، 0.2)) ، توقف اللون (0.75 ، rgba (255 ، 255 ، 255 ، 0.2)) ، توقف اللون (0.75 ، شفاف) ، ل(شفاف))؛
background-image: -webkit-linear-gradient (45deg، rgba (255، 255، 255، 0.2) 25٪، transparent 25٪، transparent 50٪، rgba (255، 255، 255، 0.2) 50٪، rgba (255) 255 ، 255 ، 0.2) 75٪ ، شفافة 75٪ ، شفافة) ؛
background-image: -moz-linear-gradient (45deg، rgba (255، 255، 255، 0.2) 25٪، transparent 25٪، transparent 50٪، rgba (255، 255، 255، 0.2) 50٪، rgba (255 255 ، 255 ، 0.2) 75٪ ، شفافة 75٪ ، شفافة) ؛
background-image: -o-linear-gradient (45deg، rgba (255، 255، 255، 0.2) 25٪، transparent 25٪، transparent 50٪، rgba (255، 255، 255، 0.2) 50٪، rgba (255 255 ، 255 ، 0.2) 75٪ ، شفافة 75٪ ، شفافة) ؛
background-image: linear-gradient (45deg، rgba (255، 255، 255، 0.2) 25٪، transparent 25٪، transparent 50٪، rgba (255، 255، 255، 0.2) 50٪، rgba (255، 255، 255 ، 0.2) 75٪ ، شفافية 75٪ ، شفافة) ؛
-webkit-background-size: 32px 32px؛
-moz-background-size: 32px 32px؛
-o-background-size: 32px 32px؛
background-size: 32px 32px؛
-webkit-animation: linet-stripe-animation 500ms linear linin؛
-moz-animation: speed-stripe-animation 500ms linear linin؛
-ms-animation: speed-stripe-animation 500ms linear linin؛
-o-animation: linet-stripe-animation 500ms linear linin؛
الرسوم المتحركة: وتيرة شريطية الرسوم المتحركة 500ms خطي لانهائية.
}
@ -webkit-keyframes pace-stripe-animation {
0٪ {-webkit-transform: none؛ تحويل: لا شيء ؛ }
100٪ {-webkit-transform: translate (-32px، 0)؛ transform: translate (-32px، 0)؛ }
}
@ -moz-keyframes pace-stripe-animation {
0٪ {-moz-transform: none؛ تحويل: لا شيء ؛ }
100٪ {-moz-transform: translate (-32px، 0)؛ transform: translate (-32px، 0)؛ }
}
@ -o-keyframes pace-stripe-animation {
0٪ {-o-transform: none؛ تحويل: لا شيء ؛ }
100٪ {-o-transform: translate (-32px، 0)؛ transform: translate (-32px، 0)؛ }
}
@ -ms-keyframes pace-stripe-animation {
0٪ {-ms-transform: none؛ تحويل: لا شيء ؛ }
100٪ {-ms-transform: translate (-32px، 0)؛ transform: translate (-32px، 0)؛ }
}
keyframes pace-stripe-animation {
0٪ {transform: none؛ تحويل: لا شيء ؛ }
100٪ {transform: translate (-32px، 0)؛ transform: translate (-32px، 0)؛ }
}
.سرعة {
أحداث -webkit- المؤشر: لا شيء ؛
أحداث المؤشر: لا شيء ؛
-webkit-user-select: لا يوجد؛
-moz-user-select: لا يوجد
اختيار المستخدم: لا شيء ؛
}
.pace-inactive {
عرض لا شيء؛
}
.pace .pace-progress {
لون الخلفية: # 78c0f0 ؛
اللون: # CBE7F9.
الموقع: ثابت
ض مؤشر: 2000 ؛
أعلى: 0 ؛
اليسار: 0 ؛
الارتفاع: 12 بكسل
إخفاء الفائض؛
-webkit-border-radius: 0 0 4px 0؛
-moz-border-radius: 0 0 4px 0؛
-i-border-radius: 0 0 4px 0؛
border-radius: 0 0 4px 0؛
-webkit-box-shadow: inset -1px 0 rgba (0، 0، 0، 0.3)، inset 0 -px rgba (0، 0، 0، 0.3)، inset 0 2px rgba (255، 255، 255، 0.5) ، inset 0 6px rgba (255، 255، 255، 0.3)؛
-moz-box-shadow: inset -1px 0 rgba (0، 0، 0، 0.3)، inset 0-1px rgba (0، 0، 0، 0.3)، inset 0 2px rgba (255، 255، 255، 0.5) ، inset 0 6px rgba (255، 255، 255، 0.3)؛
-o-box-shadow: inset -1px 0 rgba (0، 0، 0، 0.3)، inset 0-1px rgba (0، 0، 0، 0.3)، inset 0 2px rgba (255، 255، 255، 0.5) ، inset 0 6px rgba (255، 255، 255، 0.3)؛
box-shadow: inset -1px 0 rgba (0، 0، 0، 0.3)، inset 0 -px rgba (0، 0، 0، 0.3)، inset 0 2px rgba (255، 255، 255، 0.5)، inset 0 6px rgba (255 ، 255 ، 255 ، 0.3) ؛
-webkit-transition: width 1s؛
-moz-transition: width 1s؛
-o-transition: width 1s؛
الانتقال: عرض 1s.
}
.pace .pace-progress-inner {
الموقع: مطلقة
أعلى: 0 ؛
اليسار: 0 ؛
right: -28px؛
أسفل: 0 ؛
background-image: -o-radial-gradient (rgba (25، 147، 228، 0.6) 0٪، rgba (120، 192، 240، 0) 100٪)؛
background-image: -moz-radial-gradient (rgba (25، 147، 228، 0.6) 0٪، rgba (120، 192، 240، 0) 100٪)؛
background-image: -webkit-radial-gradient (rgba (25، 147، 228، 0.6) 0٪، rgba (120، 192، 240، 0) 100٪)؛
background-image: radial-gradient (rgba (25، 147، 228، 0.6) 0٪، rgba (120، 192، 240، 0) 100٪)؛
-webkit-background-size: 28px 100٪؛
-moz-background-size: 28px 100٪؛
-o-background-size: 28px 100٪؛
background-size: 28px 100٪؛
-webkit-animation: linet-stripe-animation 500ms linear linin؛
-moz-animation: speed-stripe-animation 500ms linear linin؛
-ms-animation: speed-stripe-animation 500ms linear linin؛
-o-animation: linet-stripe-animation 500ms linear linin؛
الرسوم المتحركة: وتيرة شريطية الرسوم المتحركة 500ms خطي لانهائية.
}
@ -webkit-keyframes pace-stripe-animation {
0٪ {-webkit-transform: none؛ تحويل: لا شيء ؛ }
100٪ {-webkit-transform: translate (-28px، 0)؛ transform: translate (-28px، 0)؛ }
}
@ -moz-keyframes pace-stripe-animation {
0٪ {-moz-transform: none؛ تحويل: لا شيء ؛ }
100٪ {-moz-transform: translate (-28px، 0)؛ transform: translate (-28px، 0)؛ }
}
@ -o-keyframes pace-stripe-animation {
0٪ {-o-transform: none؛ تحويل: لا شيء ؛ }
100٪ {-o-transform: translate (-28px، 0)؛ transform: translate (-28px، 0)؛ }
}
@ -ms-keyframes pace-stripe-animation {
0٪ {-ms-transform: none؛ تحويل: لا شيء ؛ }
100٪ {-ms-transform: translate (-28px، 0)؛ transform: translate (-28px، 0)؛ }
}
keyframes pace-stripe-animation {
0٪ {transform: none؛ تحويل: لا شيء ؛ }
100٪ {transform: translate (-28px، 0)؛ transform: translate (-28px، 0)؛ }
}
.سرعة {
أحداث -webkit- المؤشر: لا شيء ؛
أحداث المؤشر: لا شيء ؛
-webkit-user-select: لا يوجد؛
-moz-user-select: لا يوجد
اختيار المستخدم: لا شيء ؛
}
.pace .pace-progress {
العرض محجوب؛
الموقع: ثابت
ض مؤشر: 2000 ؛
أعلى: 0 ؛
اليسار: 0 ؛
الارتفاع: 12 بكسل
الخلفية: # 29d؛
-webkit-transition: -webkit-transform .3s، width 1s؛
-moz-transition: width 1s؛
-o-transform: width 1s؛
الانتقال: تحويل .3s ، عرض 1s ؛
-webkit-transform: translateY (-50px)؛
transform: translateY (-50px)؛
أحداث المؤشر: لا شيء ؛
}
.pace.pace-active .pace-progress {
-webkit-transform: translateY (0)؛
transform: translateY (0)؛
}
.سرعة {
أحداث -webkit- المؤشر: لا شيء ؛
أحداث المؤشر: لا شيء ؛
-webkit-user-select: لا يوجد؛
-moz-user-select: لا يوجد
اختيار المستخدم: لا شيء ؛
}
.pace.pace-inactive .pace-progress {
عرض لا شيء؛
}
.pace .pace-progress {
الموقع: ثابت
ض مؤشر: 2000 ؛
أعلى: 0 ؛
الصحيح: 0 ؛
الارتفاع: 5rem؛
العرض: 5rem.
}
.pace .pace-progress: after {
العرض محجوب؛
الموقع: مطلقة
أعلى: 0 ؛
right: .5rem؛
المحتوى: attr (نص تقدم البيانات) ؛
font-family: "Helvetica Neue"، sans-serif؛
الخط الوزن: 100 ؛
حجم الخط: 5rem ؛
خط الطول: 1 ؛
محاذاة النص: right؛
اللون: rgba (0 ، 0 ، 0 ، 0.19999999999999996) ؛
}
.سرعة {
أحداث -webkit- المؤشر: لا شيء ؛
أحداث المؤشر: لا شيء ؛
-webkit-user-select: لا يوجد؛
-moz-user-select: لا يوجد
اختيار المستخدم: لا شيء ؛
}
.pace .pace-activity {
العرض محجوب؛
الموقع: ثابت
ض مؤشر: 2000 ؛
أعلى: 0 ؛
الصحيح: 0 ؛
العرض: 300 بكسل ؛
الارتفاع: 300 بكسل ؛
الخلفية: # 29d؛
-webkit-transition: -webkit-transform 0.3s؛
الانتقال: تحويل 0.3s ؛
-webkit-transform: translateX (100٪) translateY (-100٪) rotate (45deg)؛
تحويل: translateX (100 ٪) translateY (-100 ٪) تناوب (45deg) ؛
أحداث المؤشر: لا شيء ؛
}
.pace.pace-active .pace-activity {
-webkit-transform: translateX (50٪) translateY (-50٪) rotate (45deg)؛
تحويل: translateX (50 ٪) translateY (-50 ٪) تناوب (45deg) ؛
}
.pace .pace-activity :: قبل ،
.pace .pace-activity :: after {
الموقع: مطلقة
أسفل: 30 بكسل ؛
اليسار: 50 ٪.
العرض محجوب؛
border: 5px solid #fff؛
نصف قطر الحدود: 50٪ ؛
يحتوى: ''؛
}
.pace .pace-activity :: before {
الهامش الأيسر: -40 بكسل ؛
العرض: 80 بكسل
الارتفاع: 80 بكسل
border-right-color: rgba (0، 0، 0، .2)؛
border-left-color: rgba (0، 0، 0، .2)؛
-webkit-animation: 3-speed rotation الدوران اللانهائي.
الرسوم المتحركة: سرعة الدوران 3s خطي لانهائية.
}
.pace .pace-activity :: after {
أسفل: 50 بكسل ؛
الهامش الأيسر: -20 بكسل ؛
العرض: 40 بكسل
الارتفاع: 40 بكسل
border-top-color: rgba (0، 0، 0، .2)؛
border-bottom-color: rgba (0، 0، 0، .2)؛
-webkit-animation: 1-lination linct lination خطي؛
الرسوم المتحركة: 1 - سرعة الدوران الخطي لانهائية.
}
@ -webkit-keyframes pace-rotation {
0٪ {-webkit-transform: rotate (0deg)؛ }
100٪ {-webkit-transform: rotate (359deg)؛ }
}
keyframes pace-rotation {
0٪ {transform: rotate (0deg)؛ }
100٪ {transform: rotate (359deg)؛ }
}
.سرعة {
العرض: 140 بكسل ؛
الارتفاع: 300 بكسل ؛
الموقع: ثابت
أعلى: - 90 بكسل
right: -20px؛
ض مؤشر: 2000 ؛
-webkit-transform: scale (0)؛
-moz-transform: scale (0)؛
-ms-transform: scale (0)؛
-o-transform: scale (0)؛
transform: scale (0)؛
عتامة: 0 ؛
-webkit- الانتقال: كل 2s خطي 0s.
-moz-transition: all 2s linear 0s؛
الانتقال: كل 2s خطي 0s.
}
.pace.pace-active {
-webkit-transform: scale (.25)؛
-moz-transform: scale (.25)؛
-ms-transform: scale (.25) ؛
-o-transform: scale (.25)؛
transform: scale (.25)؛
عتامة: 1 ؛
}
.pace .pace-activity {
العرض: 140 بكسل ؛
الارتفاع: 140 بكسل
border-radius: 70px؛
الخلفية: # 29d؛
الموقع: مطلقة
أعلى: 0 ؛
z-index: 1911؛
-webkit-animation: pace-bounce 1s لانهائية؛
-moz-animation: pace-bounce 1s لانهائية ؛
-o-animation: slow-bounce 1s لانهائية ؛
-ms-animation: 1-pace bounce infinite؛
animation: pace-bounce 1s لانهائية؛
}
.pace .pace-progress {
الموقع: مطلقة
العرض محجوب؛
اليسار: 50 ٪.
أسفل: 0 ؛
ض مؤشر: 1910.
الهامش الأيسر: -30 بكسل ؛
العرض: 60 بكسل
الارتفاع: 75 بكسل ؛
الخلفية: rgba (20 ، 20 ، 20 ، .1) ؛
box-shadow: 0 0 20px 35px rgba (20، 20، 20، .1)؛
border-radius: 30px / 40px؛
-webkit-transform: scaleY (.3)؛
-moz-transform: scaleY (.3)؛
-ms-transform: scaleY (.3)؛
-o-transform: scaleY (.3)؛
transform: scaleY (.3)؛
-webkit-animation: speed-compress .5s infinite alternate؛
-moz-animation: وتيرة -5.5 ثانية بديلة لانهائية.
-o-animation: speed-compress .5s infinite alternate؛
-ms-animation: وتيرة -5.5 ثانية بديلة لانهائية.
الرسوم المتحركة: تيرة - ضغط .5S لانهائية بديلة.
}
@ -webkit-keyframes pace-bounce {
0٪
أعلى: 0 ؛
-webkit-animation-timing-function: ease-in؛
}
40٪ {}
50٪ {
العلوي: 140 بكسل
الارتفاع: 140 بكسل
-webkit-animation-timing-function: ease-out؛
}
55٪ {
العلوي: 160 بكسل ؛
الارتفاع: 120 بكسل
border-radius: 70px / 60px؛
-webkit-animation-timing-function: ease-in؛
}
65٪
العلوي: 120 بكسل ؛
الارتفاع: 140 بكسل
border-radius: 70px؛
-webkit-animation-timing-function: ease-out؛
}
95٪
أعلى: 0 ؛
-webkit-animation-timing-function: ease-in؛
}
100٪ {
أعلى: 0 ؛
-webkit-animation-timing-function: ease-in؛
}
}
@ -moz-keyframes pace-bounce {
0٪
أعلى: 0 ؛
-moz-animation-timing-function: ease-in؛
}
40٪ {}
50٪ {
العلوي: 140 بكسل
الارتفاع: 140 بكسل
-moz-animation-timing-function: ease-out؛
}
55٪ {
العلوي: 160 بكسل ؛
الارتفاع: 120 بكسل
border-radius: 70px / 60px؛
-moz-animation-timing-function: ease-in؛
}
65٪
العلوي: 120 بكسل ؛
الارتفاع: 140 بكسل
border-radius: 70px؛
-moz-animation-timing-function: ease-out؛}
95٪
أعلى: 0 ؛
-moz-animation-timing-function: ease-in؛
}
100٪ {top: 0؛
-moz-animation-timing-function: ease-in؛
}
}
keyframes pace-bounce {
0٪
أعلى: 0 ؛
الرسوم المتحركة للتوقيت وظيفة: سهولة في ؛
}
50٪ {
العلوي: 140 بكسل
الارتفاع: 140 بكسل
الرسوم المتحركة للتوقيت وظيفة: سهولة التدريجي ؛
}
55٪ {
العلوي: 160 بكسل ؛
الارتفاع: 120 بكسل
border-radius: 70px / 60px؛
الرسوم المتحركة للتوقيت وظيفة: سهولة في ؛
}
65٪
العلوي: 120 بكسل ؛
الارتفاع: 140 بكسل
border-radius: 70px؛
الرسوم المتحركة للتوقيت وظيفة: سهولة التدريجي ؛
}
95٪
أعلى: 0 ؛
الرسوم المتحركة للتوقيت وظيفة: سهولة في ؛
}
100٪ {
أعلى: 0 ؛
الرسوم المتحركة للتوقيت وظيفة: سهولة في ؛
}
}
@ -webkit-keyframes pace-compress {
0٪
أسفل: 0 ؛
الهامش الأيسر: -30 بكسل ؛
العرض: 60 بكسل
الارتفاع: 75 بكسل ؛
الخلفية: rgba (20 ، 20 ، 20 ، .1) ؛
box-shadow: 0 0 20px 35px rgba (20، 20، 20، .1)؛
border-radius: 30px / 40px؛
-webkit-animation-timing-function: ease-in؛
}
100٪ {
أسفل: 30 بكسل ؛
الهامش الأيسر: -10 بكسل ؛
العرض: 20 بكسل ؛
الارتفاع: 5 بكسل ؛
الخلفية: rgba (20 ، 20 ، 20 ، .3) ؛
box-shadow: 0 0 20px 35px rgba (20، 20، 20، .3)؛
border-radius: 20px / 20px؛
-webkit-animation-timing-function: ease-out؛
}
}
@ -moz-keyframes pace-compress {
0٪
أسفل: 0 ؛
الهامش الأيسر: -30 بكسل ؛
العرض: 60 بكسل
الارتفاع: 75 بكسل ؛
الخلفية: rgba (20 ، 20 ، 20 ، .1) ؛
box-shadow: 0 0 20px 35px rgba (20، 20، 20، .1)؛
border-radius: 30px / 40px؛
-moz-animation-timing-function: ease-in؛
}
100٪ {
أسفل: 30 بكسل ؛
الهامش الأيسر: -10 بكسل ؛
العرض: 20 بكسل ؛
الارتفاع: 5 بكسل ؛
الخلفية: rgba (20 ، 20 ، 20 ، .3) ؛
box-shadow: 0 0 20px 35px rgba (20، 20، 20، .3)؛
border-radius: 20px / 20px؛
-moz-animation-timing-function: ease-out؛
}
}
keyframes pace-compress {
0٪
أسفل: 0 ؛
الهامش الأيسر: -30 بكسل ؛
العرض: 60 بكسل
الارتفاع: 75 بكسل ؛
الخلفية: rgba (20 ، 20 ، 20 ، .1) ؛
box-shadow: 0 0 20px 35px rgba (20، 20، 20، .1)؛
border-radius: 30px / 40px؛
الرسوم المتحركة للتوقيت وظيفة: سهولة في ؛
}
100٪ {
أسفل: 30 بكسل ؛
الهامش الأيسر: -10 بكسل ؛
العرض: 20 بكسل ؛
الارتفاع: 5 بكسل ؛
الخلفية: rgba (20 ، 20 ، 20 ، .3) ؛
box-shadow: 0 0 20px 35px rgba (20، 20، 20، .3)؛
border-radius: 20px / 20px؛
الرسوم المتحركة للتوقيت وظيفة: سهولة التدريجي ؛
}
}
.سرعة {
-حجم-مربع-تحجيم: مربع الحدود ؛
-moz-box-sizing: border-box؛
-m-box-sizing: border-box؛
-o-box-sizing: border-box؛
مربع التحجيم: مربع الحدود ؛
-webkit-border-radius: 10px؛
-moz-border-radius: 10px؛
border-radius: 10px؛
-moz-background-clip: padding؛
-webkit-background-clip: padding-box؛
خلفية كليب: مربع الحشو.
أحداث -webkit- المؤشر: لا شيء ؛
أحداث المؤشر: لا شيء ؛
-webkit-user-select: لا يوجد؛
-moz-user-select: لا يوجد
اختيار المستخدم: لا شيء ؛
ض مؤشر: 2000 ؛
الموقع: ثابت
الهامش: auto؛
العلوي: 12 بكسل ؛
اليسار: 0 ؛
الصحيح: 0 ؛
أسفل: 0 ؛
العرض: 200 بكسل ؛
الارتفاع: 25 بكسل
border: 2px solid # 29d؛
لون الخلفية: #fff؛
}
.pace .pace-progress {
-حجم-مربع-تحجيم: مربع الحدود ؛
-moz-box-sizing: border-box؛
-m-box-sizing: border-box؛
-o-box-sizing: border-box؛
مربع التحجيم: مربع الحدود ؛
-webkit-border-radius: 5px؛
-moz-border-radius: 5px؛
border-radius: 5px؛
-webkit-background-clip: padding-box؛
-moz-background-clip: padding؛
خلفية كليب: مربع الحشو.
-webkit- الانتقال: 1s العرض 1s في الخروج خط مستقيم 1s ؛
-moz- الانتقال: 1s العرض 1s في الخروج خارج الخط 1s؛
-ms-transition: عرض 1s سهولة في الخروج 1s خطي؛
-o-transition: العرض 1s سهلة التخارج 1s خطية ؛
الانتقال: 1s العرض 1s في الخروج خارج الخط 1s؛
-webkit-transform: translate3d (0، 0، 0)؛
تحويل: translate3d (0 ، 0 ، 0) ؛
max-width: 190px؛
الموقع: ثابت
ض مؤشر: 2000 ؛
العرض محجوب؛
الموقع: مطلقة
اليسار: 3 بكسل ؛
العلوي: 3 بكسل ؛
الارتفاع: 15 بكسل
حجم الخط: 12 بكسل ؛
الخلفية: # 29d؛
اللون: # 29d.
خط الطول: 60 بكسل ؛
font-weight: bold؛
font-family: Helvetica، Arial، "Lucida Grande"، sans-serif؛
}
.pace .pace-progress: after {
المحتوى: attr (نص تقدم البيانات) ؛
عرض: مضمنة ، كتلة ؛
}
.pace.pace-inactive {
عرض لا شيء؛
}
.سرعة {
أحداث -webkit- المؤشر: لا شيء ؛
أحداث المؤشر: لا شيء ؛
-webkit-user-select: لا يوجد؛
-moz-user-select: لا يوجد
اختيار المستخدم: لا شيء ؛
-webkit- المنظور: 12rem ؛
-مؤشر -moz: 12rem ؛
-ms-منظور: 12rem ؛
-o-perspective: 12rem؛
المنظور: 12rem؛
ض مؤشر: 2000 ؛
الموقع: ثابت
الارتفاع: 6rem.
العرض: 6rem.
الهامش: auto؛
أعلى: 0 ؛
اليسار: 0 ؛
الصحيح: 0 ؛
أسفل: 0 ؛
}
.pace.pace-inactive .pace-progress {
عرض لا شيء؛
}
.pace .pace-progress {
الموقع: ثابت
ض مؤشر: 2000 ؛
العرض محجوب؛
الموقع: مطلقة
اليسار: 0 ؛
أعلى: 0 ؛
الارتفاع: 6rem.
العرض: 6rem!
خط الطول: 6rem.
حجم الخط: 2rem ؛
نصف قطر الحدود: 50٪ ؛
الخلفية: rgba (34 ، 153 ، 221 ، 0.8) ؛
اللون: #fff؛
font-family: "Helvetica Neue"، sans-serif؛
الخط الوزن: 100 ؛
محاذاة النص: مركز؛
-webkit-animation: slow-3d-spinner linin infinite 2s؛
-moz-animation: pace-3d-spinner linin infinite 2s؛
-ms-animation: slow-3d-spinner linin infinite 2s؛
-o-animation: slow-3d-spinner linin infinite 2s؛
animation: pace-3d-spinner linear infinite 2s؛
-webkit-transform-style: preserve-3d؛
-moz-transform-style: preserve-3d؛
-ms-transform-style: preserve-3d؛
-o-transform-style: preserve-3d؛
تحويل النمط: preserve-3d؛
}
.pace .pace-progress: after {
المحتوى: attr (نص تقدم البيانات) ؛
العرض محجوب؛
}
@ -webkit-keyframes pace-3d-spinner {
من عند {
-webkit-transform: rotateY (0deg)؛
}
إلى {
-webkit-transform: rotateY (360deg)؛
}
}
@ -moz-keyframes pace-3d-spinner {
من عند {
-moz-transform: rotateY (0deg)؛
}
إلى {
-moz-transform: rotateY (360deg)؛
}
}
@ -ms-keyframes pace-3d-spinner {
من عند {
-ms-transform: rotateY (0deg)؛
}
إلى {
-ms-transform: rotateY (360deg)؛
}
}
@ -o-keyframes pace-3d-spinner {
من عند {
-o-transform: rotateY (0deg)؛
}
إلى {
-o-transform: rotateY (360deg)؛
}
}
keyframes pace-3d-spinner {
من عند {
تحويل: rotateY (0deg) ؛
}
إلى {
تحويل: rotateY (360deg) ؛
}
}
.pace.pace-inactive {
عرض لا شيء؛
}
.سرعة {
أحداث -webkit- المؤشر: لا شيء ؛
أحداث المؤشر: لا شيء ؛
-webkit-user-select: لا يوجد؛
-moz-user-select: لا يوجد
اختيار المستخدم: لا شيء ؛
ض مؤشر: 2000 ؛
الموقع: ثابت
الارتفاع: 60 بكسل ؛
العرض: 100 بكسل
الهامش: auto؛
أعلى: 0 ؛
اليسار: 0 ؛
الصحيح: 0 ؛
أسفل: 0 ؛
}
.pace .pace-progress {
ض مؤشر: 2000 ؛
الموقع: مطلقة
الارتفاع: 60 بكسل ؛
العرض: 100 بكسل!
}
.pace .pace-progress: before {
المحتوى: attr (نص تقدم البيانات) ؛
محاذاة النص: مركز؛
اللون: #fff؛
الخلفية: # 29d؛
نصف قطر الحدود: 50٪ ؛
font-family: "Helvetica Neue"، sans-serif؛
حجم الخط: 14 بكسل
الخط الوزن: 100 ؛
خط الطول: 1 ؛
الحشو: 20٪ 0 7px؛
العرض: 50 ٪.
الطول: 40 ٪.
الهامش: 10 بكسل 0 0 30 بكسل ؛
العرض محجوب؛
ض مؤشر: 999.
الموقع: مطلقة
}
.pace .pace-progress: after {
نصف قطر الحدود: 50٪ ؛
border: 5px solid # 29d؛
يحتوى: ' '؛
العرض محجوب؛
الموقع: مطلقة
أعلى: 0 ؛
اليسار: 0 ؛
الارتفاع: 60 بكسل ؛
العرض: 100 بكسل
-webkit-transform: rotate (90deg)؛
-moz-transform: rotate (90deg)؛
-o-transform: rotate (90deg)؛
تحويل: تدوير (90 درجة) ؛
-webkit-animation: spin-3 2s لانهائي خطي؛
-moz-animation: spin-3 2s linin infinite؛
-o-animation: spin-3 2s لانهائي خطي؛
الرسوم المتحركة: spin-3 2s linin infinite؛
}
.pace .pace-activity {
حجم الخط: 15 بكسل
خط الطول: 1 ؛
ض مؤشر: 2000 ؛
الموقع: مطلقة
الارتفاع: 60 بكسل ؛
العرض: 100 بكسل
العرض محجوب؛
}
.pace .pace-activity: before {
نصف قطر الحدود: 50٪ ؛
border: 5px solid # 29d؛
يحتوى: ' '؛
العرض محجوب؛
الموقع: مطلقة
أعلى: 0 ؛
اليسار: 0 ؛
الارتفاع: 60 بكسل ؛
العرض: 100 بكسل
-webkit-animation: spin-1 2s لانهائي خطي؛
-moz-animation: spin-1 2s لانهائي خطي؛
-o-animation: spin-1 2s لانهائي خطي؛
الرسوم المتحركة: spin-1 2s linin infinite؛
}
.pace .pace-activity: after {
نصف قطر الحدود: 50٪ ؛
border: 5px solid # 29d؛
يحتوى: ' '؛
العرض محجوب؛
الموقع: مطلقة
أعلى: 0 ؛
اليسار: 0 ؛
الارتفاع: 60 بكسل ؛
العرض: 100 بكسل
-webkit-transform: rotate (45deg)؛
-moz-transform: rotate (45deg)؛
-o-transform: rotate (45deg)؛
تحويل: تدوير (45deg) ؛
-webkit-animation: spin-2 2s linin infinite؛
-moz-animation: spin-2 2s linin infinite؛
-o-animation: spin-2 2s linin infinite؛
الرسوم المتحركة: تدور 2 2s خطي لانهائي.
}
@ -webkit-keyframes spin-1 {
0٪ {-webkit-transform: rotate (0deg)؛ }
100٪ {-webkit-transform: rotate (359deg)؛}
}
@ -moz-keyframes spin-1 {
0٪ {-moz-transform: rotate (0deg)؛ }
100٪ {-moz-transform: rotate (359deg)؛}
}
@ -o-keyframes spin-1 {
0٪ {-o-transform: rotate (0deg)؛ }
100٪ {-o-transform: rotate (359deg)؛}
}
keyframes spin-1 {
0٪ {transform: rotate (0deg)؛ }
100٪ {transform: rotate (359deg)؛}
}
@ -webkit-keyframes spin-2 {
0٪ {-webkit-transform: rotate (59.8deg)؛ }
100٪ {-webkit-transform: rotate (418.8deg)؛}
}
@ -moz-keyframes spin-2 {
0٪ {-moz-transform: rotate (59.8deg)؛ }
100٪ {-moz-transform: rotate (418.8deg)؛}
}
@ -o-keyframes spin-2 {
0٪ {-o-transform: rotate (59.8deg)؛ }
100٪ {-o-transform: rotate (418.8deg)؛}
}
keyframes spin-2 {
0٪ {transform: rotate (59.8deg)؛ }
100٪ {transform: rotate (418.8deg)؛}
}
@ -webkit-keyframes spin-3 {
0٪ {-webkit-transform: rotate (119.6deg)؛ }
100٪ {-webkit-transform: rotate (478.6deg)؛}
}
@ -moz-keyframes spin-3 {
0٪ {-moz-transform: rotate (119.6deg)؛ }
100٪ {-moz-transform: rotate (478.6deg)؛}
}
@ -o-keyframes spin-3 {
0٪ {-o-transform: rotate (119.6deg)؛ }
100٪ {-o-transform: rotate (478.6deg)؛}
}
keyframes spin-3 {
0٪ {transform: rotate (119.6deg)؛ }
100٪ {transform: rotate (478.6deg)؛}
}
.سرعة {
أحداث -webkit- المؤشر: لا شيء ؛
أحداث المؤشر: لا شيء ؛
ض مؤشر: 2000 ؛
الموقع: ثابت
الارتفاع: 90 بكسل ؛
العرض: 90 بكسل
الهامش: auto؛
أعلى: 0 ؛
اليسار: 0 ؛
الصحيح: 0 ؛
أسفل: 0 ؛
}
.pace.pace-inactive .pace-activity {
عرض لا شيء؛
}
.pace .pace-activity {
الموقع: ثابت
ض مؤشر: 2000 ؛
العرض محجوب؛
الموقع: مطلقة
left: -30px؛
أعلى: - 30 بكسل ؛
الارتفاع: 90 بكسل ؛
العرض: 90 بكسل
العرض محجوب؛
border-width: 30px؛
نمط الحدود: مزدوجة.
لون الحدود: # 29d شفاف شفاف.
نصف قطر الحدود: 50٪ ؛
-webkit-animation: spin 1s linin infinite؛
-moz-animation: spin 1s linin infinite؛
-o-animation: spin 1s linin infinite؛
الرسوم المتحركة: تدور 1S خطي لانهائي.
}
.pace .pace-activity: before {
يحتوى: ' '؛
الموقع: مطلقة
top: 10px؛
left: 10px؛
الارتفاع: 50 بكسل ؛
العرض: 50 بكسل ؛
العرض محجوب؛
border-width: 10px؛
نمط الحدود: صلب ؛
لون الحدود: # 29d شفاف شفاف.
نصف قطر الحدود: 50٪ ؛
}
@ -webkit-keyframes spin {
100٪ {-webkit-transform: rotate (359deg)؛ }
}
@ -moz-keyframes spin {
100٪ {-moz-transform: rotate (359deg)؛ }
}
@ -o-keyframes spin {
100٪ {-moz-transform: rotate (359deg)؛ }
}
keyframes spin {
100٪ {transform: rotate (359deg)؛ }
}
.سرعة {
أحداث -webkit- المؤشر: لا شيء ؛
أحداث المؤشر: لا شيء ؛
-webkit-user-select: لا يوجد؛
-moz-user-select: لا يوجد
اختيار المستخدم: لا شيء ؛
ض مؤشر: 2000 ؛
الموقع: ثابت
الهامش: auto؛
أعلى: 0 ؛
اليسار: 0 ؛
الصحيح: 0 ؛
أسفل: 0 ؛
الارتفاع: 5 بكسل ؛
العرض: 200 بكسل ؛
الخلفية: #fff؛
border: 1px solid # 29d؛
}
.pace .pace-progress {
-حجم-مربع-تحجيم: مربع الحدود ؛
-moz-box-sizing: border-box؛
-m-box-sizing: border-box؛
-o-box-sizing: border-box؛
مربع التحجيم: مربع الحدود ؛
-webkit- الانتقال: 1s العرض 1s في الخروج خط مستقيم 1s ؛
-moz- الانتقال: 1s العرض 1s في الخروج خارج الخط 1s؛
-ms-transition: عرض 1s سهولة في الخروج 1s خطي؛
-o-transition: العرض 1s سهلة التخارج 1s خطية ؛
الانتقال: 1s العرض 1s في الخروج خارج الخط 1s؛
-webkit-transform: translate3d (0، 0، 0)؛
تحويل -moz: translate3d (0 ، 0 ، 0) ؛
-ms-transform: translate3d (0، 0، 0)؛
-o-transform: translate3d (0، 0، 0)؛
تحويل: translate3d (0 ، 0 ، 0) ؛
أقصى عرض: 200 بكسل ؛
الموقع: ثابت
ض مؤشر: 2000 ؛
العرض محجوب؛
الموقع: مطلقة
left: 0px؛
العلوي: 0 بكسل ؛
الارتفاع: 100٪ ؛
الخلفية: # 29d؛
}
.pace.pace-inactive {
عرض لا شيء؛
}
أتممنا كل الأشكال أتمنى أن تلقوا مبتغاكم تحياتي.
