التحميل مثل facebook
تساعد هذه الإضافة في جعل وقت تحميل الصفحة أكثر جاذبية وتفاعلية بالنسبة للمستخدمين، بدلاً من أن يواجهوا شاشات تحميل فارغة أو مؤشرات تحميل تقليدية
<style>
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.linear-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 1000px 104px;
height: 100%;
min-height: 100vh;
position: relative;
overflow: hidden;
}
/* إخفاء المحتوى بشكل افتراضي */
#main {
display: none;
}
</style>
<div id="overlay" class="linear-background">
<!-- هنا يمكن إضافة المزيد من العناصر للتحميل المبدئي -->
</div>
<script>
function onReady(callback) {
var intervalId = window.setInterval(function() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalId);
callback.call(this);
}
}, 1000);
}
function setVisible(selector, visible) {
document.querySelector(selector).style.display = visible ? 'block' : 'none';
}
onReady(function() {
setVisible('#main', true); // عرض المحتوى
setVisible('#overlay', false); // إخفاء التحميل
});
</script>
شرح الاضافة
تأثير "Skeleton Screen" الذي تم تطبيقه في الكود السابق يعتمد على استخدام الـ CSS animations لإنشاء تأثير بصري يحاكي عملية التحميل، مما يحسن تجربة المستخدم بينما ينتظر تحميل المحتوى. فيما يلي شرح لكيفية عمل هذه الإضافة:
الخلفية والحركة
1. الخلفية المتحركة (`placeHolderShimmer`): يتم تعريف حركة باستخدام `@keyframes` باسم `placeHolderShimmer`. هذه الحركة تغير من موقع الخلفية (`background-position`) من اليسار إلى اليمين، مما يخلق تأثير اللمعان المتحرك عبر العنصر.
2. تحديد الخلفية: الخلفية تتكون من تدرج خطي (`linear-gradient`) يحتوي على ألوان مختلفة (في هذه الحالة، ثلاثة ظلال من الرمادي) لتحاكي شكل المحتوى (مثل النصوص والصور) الذي يتم تحميله.
3. التحرك لما لا نهاية (`animation-iteration-count: infinite`): يتم تكرار حركة اللمعان إلى ما لا نهاية، مما يعطي انطباعًا بأن المحتوى يتم تحميله بشكل مستمر حتى يتم تحميل المحتوى الفعلي ويظهر في المكان المخصص له.
الأجزاء الداخلية
- الأجزاء (`divs`) داخل `.linear-background`: تمثل الأشكال المختلفة للمحتوى الذي يجري تحميله، مثل صور، عناوين، أو فقرات نصية. يتم استخدام الـ CSS لتعديل هذه الـ `divs` لتتوافق مع حجم ومكان المحتوى المتوقع.
سرعة الحركة
- سرعة الحركة (`animation-duration: 1s`): يتم تحديد أن الدورة الكاملة للحركة تستغرق ثانية واحدة. هذه السرعة تخلق تأثيراً متواصلاً وسلساً دون أن يكون سريعاً جداً أو بطيئاً جداً.
الاستخدام
- هذه الإضافة مفيدة لتحسين تجربة المستخدم، حيث تقلل من الإحساس بوقت الانتظار وتعطي انطباعاً بأن المحتوى يُحمل بشكل ديناميكي.
- يمكن تخصيص الألوان وسرعة الحركة وأحجام الـ `divs` لتناسب تصميم الموقع أو التطبيق بشكل أفضل.
انظر النتيجة من هنا
See the Pen تحميل مثل فيسبوك by for 3araby (@for_3araby) on CodePen.
ليست هناك تعليقات:
شارك مع اصدقائك: