مجموعة رائعة من التأثيرات الابداعية لتحميل الصفحة والتي تستخدم رسوم متحركة SVG بمكتبة Snap.svg. والفكرة هي اظهار تاثير شفاف overlay مع شكل جميل أثناء تحميل المحتوي الجديد.

• للمشاهدة الحية

• للتحميل

فكرة تأثيرات تحميل الصفحة هي تحريك شكل إلي اطار العرض واظهار مؤشر التحميل. وعندما يتم تحميل المحتوي الجديد فان الشكل سيتحرك عكسيا لتظهر الصفحة .وسنقوم باستخدام رسوم SVG المتحركة في مكتبة Snap.svg للتأثيرات لأن هذا يسمح لنا بإنشاء أشكال معقدة وتحولات مثيرة للاهتمام.

طريقة اظهار تأثير تحميل الصفحة عن طريق تعريف مسار الرسوم المتحركة المحدد في مثال SVG التالي

<div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
        <path d="M 0,70 80,60 80,80 0,80 0,70"/>
    </svg>
</div><!-- /pageload-overlay -->

وفي النهاية نأمل أن تجدهم مفيدين وملهمين لك.

للمشاهدة الحية

للتحميل