المتطلبات: سوف نواجه استخدام أشرطة التقدم المختلفة أثناء التطوير، نظرًا لوجود أشرطة تقدم مختلفة في المكونات الإضافية الحالية، من أجل تسهيل التطوير المخصص لدينا والتعديل المناسب للأنماط، نستخدم أنماط HTML وCSS هنا وظيفة الشريط .
من خلال هذه المقالة، سوف نفهم كيفية استخدام HTML/CSS لإنشاء العديد من أشرطة التقدم الأساسية وأشرطة التقدم الرائعة والرسوم المتحركة الخاصة بها.
إنشاء شريط تقدم من خلال مقياس علامة HTML. إنشاء شريط تقدم من خلال تقدم علامة HTML. HTML تنفيذ قيود شريط التقدم. استخدم النسب المئوية والتدرجات اللونية لإنشاء أشرطة تقدم عادية ورسومها المتحركة. شريط تقدم على شكل استخدم CSS لإنشاء شريط تقدم كروي.
شريط التقدم الأكثر شيوعًا الذي نواجهه هو شريط التقدم الأفقي. هذا هو الأكثر شيوعًا، ويستخدم بشكل أساسي HTML5 لتوفير علامتين أصليتين ولتنفيذ شريط التقدم.
الأمثلة المحددة للعداد هي كما يلي:
<ص> <span>الاكتمال:</span> <meter min="0" max="500" value="350">350 درجة</meter> </ص>
من بينها، يمثل الحد الأدنى والحد الأقصى والقيمة القيمة القصوى والحد الأدنى للقيمة والقيمة الحالية على التوالي.
دعونا نلقي نظرة على استخدام العلامات:
<ص> <label for="file">الاكتمال:</label> <progress max="100" value="70"> 70% </progress> </ص>
من بينها، تصف سمة الحد الأقصى إجمالي حجم العمل الذي يجب إكماله للمهمة التي يمثلها عنصر التقدم، ويتم استخدام سمة القيمة لتحديد مقدار العمل الذي تم إكماله بواسطة شريط التقدم.
الاختلافات بين الاثنين هي كما يلي: إذن السؤال هو، انطلاقا من العرض أعلاه، فإن تأثيرات العلامتين هي نفسها تماما، فما هو الفرق بينهما؟ لماذا يوجد علامتان متطابقتان على ما يبدو؟ والفرق الأكبر بين هذين العنصرين هو الفرق الدلالي. يمثل العداد قيمة قياس عددية أو قيمة كسرية ضمن نطاق معروف. يمثل التقدم مدى تقدم إكمال المهمة. على سبيل المثال، يجب استخدام مستوى الإكمال الحالي لأحد المتطلبات، وإذا كنت تريد عرض قيمة السرعة الحالية للسيارة لوحة القيادة، يجب استخدام العداد.
حدود جهاز القياس والتقدم بالطبع، في متطلبات العمل الفعلية أو بيئات الإنتاج، لن ترى أبدًا ملصقات جهاز القياس والتقدم. لا يمكننا تعديل أنماط المقياس وتسميات التقدم بشكل فعال، مثل لون الخلفية، ولون مقدمة التقدم، وما إلى ذلك. والأمر الأكثر خطورة هو أن أداء الأنماط الافتراضية للمتصفح غير متسق بين المتصفحات المختلفة. يعد هذا عيبًا كارثيًا بالنسبة لشركة تسعى إلى تحقيق الاستقرار والأداء المتسق لواجهة المستخدم! لا يمكننا إضافة بعض تأثيرات الرسوم المتحركة والتأثيرات التفاعلية إليها، لأنه في بعض سيناريوهات التطبيق الفعلية، من المؤكد أنها ليست عرضًا بسيطًا لشريط التقدم ولا شيء أكثر من ذلك، استخدم CSS لتنفيذ شريط التقدم.
لذلك، في هذه المرحلة، يتم استخدام المزيد من أساليب CSS لتنفيذ شريط التقدم.
(1) الطريقة الأكثر شيوعًا لاستخدام النسب المئوية لتنفيذ شريط التقدم هي استخدام لون الخلفية مع نسبة مئوية لإنشاء شريط تقدم بتدرج. أبسط مثال تجريبي هو كما يلي:
<div class="g-container"> <div class="g-progress"></div> </div> <div class="g-progress"></div>
وبالمثل، يمكننا استخدام سمة نمط HTML لملء قيمة الخلفية الكاملة وتمرير النسبة المئوية الفعلية. بالطبع، يوصى باستخدام سمات CSS المخصصة لتمرير القيمة، يمكننا استخدامها لتحقيق تأثير الرسوم المتحركة CSS @property لتحويل الكود الخاص بنا:
<div class="g-progress" style="--progress: 70%"></div>
@الملكية --التقدم {
بناء الجملة: '<النسبة المئوية>'؛
يرث: كاذب؛
القيمة الأولية: 0%؛
}
.ز التقدم {
الهامش: تلقائي؛
العرض: 240 بكسل؛
الارتفاع: 25 بكسل؛
نصف قطر الحدود: 25 بكسل؛
الخلفية: تدرج خطي (90deg, #0f0, #0ff var(--progress),transparent 0);
الحدود: 1 بكسل #eee؛
الانتقال: .3s --progress؛
}جوهر استخدام خلفية التدرج الزاوي: مخروطي التدرج (): تأثير المثال هو كما يلي:
الرمز هو كما يلي:
<div class="دائرة التقدم"
v-for = "(العنصر، الفهرس) قيد التقدم" :key = "index"
:نمط = "{
الخلفية: `تدرج شعاعي (#fff 55%، شفاف 56%)، تدرج مخروطي (#3A7CFF ${item.rate}%, #f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0.4 : 0 }%),تدرج شعاعي(#fff 60%, #F1F3FC 0%);`
}
">
<span class="progress-value" >{{item.name}}</span>
<div class="totalvalbox">
{{ معدل السلعة }}%
</div>
</div>
<style lang="scss" نطاق>
دائرة التقدم {
الموقف: نسبي؛
العرض: 149 دورة في الدقيقة؛
الارتفاع: 149 دورة في الدقيقة؛
عائلة الخط: PingFang SC؛
نصف قطر الحدود: 50%؛
العرض: فليكس؛
محاذاة العناصر: مركز؛
ضبط المحتوى: مركز؛
}
.قيمة التقدم {
الموقف: مطلق؛
محاذاة النص: مركز؛
ارتفاع الخط: 50 دورة في الدقيقة؛
العرض: 100%؛
وزن الخط: 400؛
حجم الخط: 26rpx؛
}
.توتالفالبوكس {
الحد الأدنى للعرض: 217 دورة في الدقيقة؛
محاذاة النص: مركز؛
الموقف: مطلق؛
أسفل: -50 دورة في الدقيقة؛
وزن الخط: 400؛
حجم الخط: 30rpx؛
}
</نمط>مشكلة التحسين هي كما يلي:
المشاكل التي تميل إلى الظهور هنا هي كما يلي: قيود تنفيذ التدرج الزاوي لأشرطة التقدم القوسية بالطبع، هذه الطريقة لها عيبان. بالطبع، عندما لا تكون نسبة التقدم مشابهة لأرقام مثل 0°، 90°، 180°، 270°، 360°، عند استخدام التدرجات الزاوية، ستكون هناك حواف خشنة واضحة عند الوصلات بين الألوان المختلفة. خذ مثالاً على التدرج المخروطي (#FFCDB2 0، #FFCDB2 27%، #B5838D 27%، #B5838D):
الحل لمثل هذه المشاكل هو ترك بعض مساحة التدرج عند نقطة الاتصال، فلنقم ببساطة بتحويل رمز التدرج الزاوي أعلاه:
{
- الخلفية: تدرج مخروطي (#FFCDB2 0، #FFCDB2 27%، #B5838D 27%، #B5838D)`
+ الخلفية: تدرج مخروطي (#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}انظر بعناية إلى الكود أعلاه. تم تغيير التغيير من 27% إلى 27% من 27% إلى 27.2%، وذلك لإزالة التأثير الفعلي بعد التغيير:
في بعض الحالات، سنواجه شريط تقدم بزوايا مستديرة في نهاية شريط التقدم. بالطبع، يمكن حل هذا الموقف أيضًا إذا كان لون شريط التقدم لونًا خالصًا، يمكننا تحقيق هذا التأثير عن طريق تراكب اثنين دوائر صغيرة في البداية والنهاية. إذا كان شريط التقدم متدرج اللون، فيجب تنفيذ شريط التقدم هذا بمساعدة SVG/Canvas
الأمثلة هي كما يلي:
أتش تي أم أل
<div class="g-progress"></div> <div class="g-container"> <div class="g-progress"></div> <div class="g-circle"></div> </div>
المغلق
الجسم، أتش تي أم أل {
العرض: 100%؛
الارتفاع: 100%؛
العرض: فليكس؛
}
.g-حاوية {
الموقف: نسبي؛
الهامش: تلقائي؛
العرض: 200 بكسل؛
الارتفاع: 200 بكسل؛
}
.ز التقدم {
الموقف: نسبي؛
الهامش: تلقائي؛
العرض: 200 بكسل؛
الارتفاع: 200 بكسل؛
نصف قطر الحدود: 50%؛
الخلفية: التدرج المخروطي (#FFCDB2 0، #FFCDB2 25%، #B5838D 25%، #B5838D)؛
القناع: تدرج شعاعي (شفاف، شفاف 80 بكسل، #000 80.5 بكسل، #000 0)؛
}
.ز-دائرة {
الموقف: مطلق؛
أعلى: 0؛
اليسار: 0؛
&::قبل،
&::بعد {
محتوى: ""؛
الموقف: مطلق؛
أعلى: 90 بكسل؛
اليسار: 90 بكسل؛
العرض: 20 بكسل؛
الارتفاع: 20 بكسل؛
نصف قطر الحدود: 50%؛
الخلفية: #FFFCDB2؛
مؤشر z: 1؛
}
&::قبل {
تحويل: ترجمة (0، -90 بكسل)؛
}
&::بعد {
تحويل: تدوير (90 درجة) ترجمة (0، -90px)؛
}
}بناءً على هذا الامتداد، يمكنك أيضًا تنفيذ شريط تقدم متعدد الألوان على شكل قوس: (قد لا يبدو هذا كشريط تقدم، ولكنه يشبه إلى حد كبير مخططًا دائريًا )
.ز التقدم {
العرض: 160 بكسل؛
الارتفاع: 160 بكسل؛
نصف قطر الحدود: 50%؛
القناع: تدرج شعاعي (شفاف، شفاف 50%، #000 51%، #000 0)؛
خلفية:
التدرج المخروطي(
#FFCDB2 0، #FFFCDB2 25%،
#B5838D 25%، #B5838D 50%،
#673ab7 50%، #673ab7 90%،
#ff5722 90.2%، #ff5722 100%
);
}أشرطة التقدم الكروية شائعة نسبيًا أيضًا، وهي مشابهة لما يلي:
الكود الأساسي هو كما يلي: ما عليك سوى التحكم في ارتفاع الموجة عندما تشير الحاوية الكروية إلى التقدم بنسبة 0% - 100%. يمكننا الحصول على تأثير الرسوم المتحركة من 0% إلى 100%
<div class="container">
<div class="wave-change"></div>
<div class="wave"></div>
</div>
.حاوية {
العرض: 200 بكسل؛
الارتفاع: 200 بكسل؛
الحدود: 5 بكسل RGB الصلبة (118، 218، 255)؛
نصف قطر الحدود: 50%؛
الفائض: مخفي؛
}
.موجة التغيير {
الموقف: مطلق؛
العرض: 200 بكسل؛
الارتفاع: 200 بكسل؛
اليسار: 0؛
أعلى: 0؛
الرسوم المتحركة: تغيير 12 ثانية خطية لا نهائية؛
&::قبل،
&::بعد{
محتوى: ""؛
الموقف: مطلق؛
العرض: 400 بكسل؛
الارتفاع: 400 بكسل؛
أعلى: 0؛
اليسار: 50%؛
لون الخلفية: rgba(255, 255, 255, .6);
نصف القطر الحدودي: 45% 47% 43% 46%؛
تحويل: ترجمة(-50%، -70%) تدوير(0);
الرسوم المتحركة: تدوير 7S الخطي لانهائي.
مؤشر z: 1؛
}
&::بعد {
نصف القطر الحدودي: 47% 42% 46% 44%؛
لون الخلفية: rgba(255, 255, 255, .8);
تحويل: ترجمة(-50%، -70%) تدوير(0);
الرسوم المتحركة: تدوير 9s الخطي -4s لا نهائية؛
مؤشر z: 2؛
}
}
.موجة {
الموقف: نسبي؛
العرض: 200 بكسل؛
الارتفاع: 200 بكسل؛
لون الخلفية: rgb(118, 218, 255);
نصف قطر الحدود: 50%؛
}
ص {
الموقف: مطلق؛
أعلى: 50%؛
اليسار: 50%؛
تحويل: ترجمة(-50%، -50%)؛
حجم الخط: 36 بكسل؛
اللون: #000؛
مؤشر z: 10؛
}
@تدوير الإطارات الرئيسية {
ل {
تحويل: ترجمة (-50%، -70%) تدوير (360 درجة)؛
}
}
@تغيير الإطارات الرئيسية {
من {
أعلى: 80 بكسل؛
}
ل {
أعلى: -120 بكسل؛
}
}بالطبع، CSS يتغير باستمرار، وأنواع أشرطة التقدم لا تقتصر بالتأكيد على الفئات المذكورة أعلاه. على سبيل المثال، يمكننا استخدام المرشحات لتقليد الرسوم المتحركة للشحن الخاصة بهواتف Huawei المحمولة، وهي أيضًا طريقة لعرض شريط التقدم ويمكن تنفيذها أيضًا باستخدام CSS خالص:
الكود الأساسي هو كما يلي
<div class="g-container">
<div class="g-number">98.7%</div>
<div class="g-contrast">
<div class="g-circle"></div>
<ul class="g-فقاعات">
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
<لي></لي>
</ul>
</div>
</div>
أتش تي أم أل,
جسم {
العرض: 100%؛
الارتفاع: 100%؛
العرض: فليكس؛
الخلفية: #000؛
الفائض: مخفي؛
}
رقم ز {
الموقف: مطلق؛
العرض: 300 بكسل؛
الأعلى: 27%؛
محاذاة النص: مركز؛
حجم الخط: 32 بكسل؛
مؤشر z: 10؛
اللون: #ففف؛
}
.g-حاوية {
الموقف: نسبي؛
العرض: 300 بكسل؛
الارتفاع: 400 بكسل؛
الهامش: تلقائي؛
}
.ز-التباين {
عامل التصفية: التباين (10) هوى-تدوير (0)؛
العرض: 300 بكسل؛
الارتفاع: 400 بكسل؛
لون الخلفية: #000؛
الفائض: مخفي؛
الرسوم المتحركة: hueRotate 10s خطي لا نهائي؛
}
.ز-دائرة {
الموقف: نسبي؛
العرض: 300 بكسل؛
الارتفاع: 300 بكسل؛
تحجيم الصندوق: صندوق الحدود؛
عامل التصفية: طمس (8 بكسل)؛
&::بعد {
محتوى: ""؛
الموقف: مطلق؛
أعلى: 40%؛
اليسار: 50%؛
تحويل: ترجمة(-50%، -50%) تدوير(0);
العرض: 200 بكسل؛
الارتفاع: 200 بكسل؛
لون الخلفية: #00ff6f؛
نصف القطر الحدودي: 42% 38% 62% 49% / 45%؛
الرسوم المتحركة: تدوير خطي لا نهائي بمقدار 10 ثوانٍ؛
}
&::قبل {
محتوى: ""؛
الموقف: مطلق؛
العرض: 176 بكسل؛
الارتفاع: 176 بكسل؛
أعلى: 40%؛
اليسار: 50%؛
تحويل: ترجمة(-50%، -50%)؛
نصف قطر الحدود: 50%؛
لون الخلفية: #000؛
مؤشر z: 10؛
}
}
.ز-فقاعات {
الموقف: مطلق؛
اليسار: 50%؛
أسفل: 0؛
العرض: 100 بكسل؛
الارتفاع: 40 بكسل؛
تحويل: ترجمة(-50%, 0);
نصف قطر الحدود: 100px 100px 0 0;
لون الخلفية: #00ff6f؛
عامل التصفية: طمس (5 بكسل)؛
}
لي {
الموقف: مطلق؛
نصف قطر الحدود: 50%؛
الخلفية: #00ff6f؛
}
@for $i من 0 إلى 15 {
لى: نث-الطفل(#{$i}) {
عرض $: 15 + عشوائي(15) + بكسل;
اليسار: 15 + عشوائي (70) + بكسل؛
أعلى: 50%؛
تحويل: ترجمة(-50%، -50%)؛
العرض: عرض $؛
الارتفاع: عرض $؛
الرسوم المتحركة: moveToTop #{random(6) + 3}s سهولة الدخول -#{random(5000)/1000}s infinite;
}
}
@تدوير الإطارات الرئيسية {
50% {
نصف القطر الحدودي: 45% / 42% 38% 58% 49%؛
}
100% {
تحويل: ترجمة (-50%، -50%) تدوير (720 درجة)؛
}
}
@keyframes moveToTop {
90% {
العتامة: 1؛
}
100% {
العتامة: .1؛
تحويل: ترجمة (-50%، -180 بكسل)؛
}
}
@keyframes hueRotate {
100% {
الفلتر: التباين (15) تدوير اللون (360 درجة)؛
}
}أخيرًا، أوصي بالعديد من أشرطة التقدم الجيدة والعالية الجودة والرائعة.
يمكن النقر فوق التنفيذ الكامل للتأثيرات المذكورة أعلاه - استخدم CSS بذكاء لتحقيق رسوم متحركة رائعة للشحن
بهذا نختتم هذه المقالة حول كيفية تنفيذ وظائف شريط التقدم المختلفة من خلال HTML/CSS. هذا كل ما في الأمر بالنسبة لمقدمة المقالة لمزيد من محتوى شريط تقدم html CSS ذي الصلة، يرجى البحث في المقالات السابقة على موقع downcodes.com أو الاستمرار في تصفح المقالات ذات الصلة أدناه، وآمل أن تدعم موقع downcodes.com في المستقبل.