في العالم الحديث، حيث أصبحت مدة تركيز الانتباه أقصر من أي وقت مضى، ومن المتوقع أن تكون أوقات تحميل المواقع الإلكترونية سريعة جدًا، أصبح تحسين المواقع الإلكترونية أكثر أهمية من أي وقت مضى.
تُعد مؤشرات التحميل (Loaders) المصممة باستخدام CSS واحدة من الأدوات الرائعة لتحسين تجربة المستخدم وأداء الموقع. بالإضافة إلى ذلك، تبدو دائمًا مبتكرة، حتى لو كانت مرئية للحظات فقط، حتى يتم تحميل الصفحة بالكامل.
شرح الكود وأهميته:
الكود المقدم يعرض 9 أنواع مختلفة من مؤشرات التحميل (Loaders) المصممة باستخدام CSS فقط، دون الحاجة إلى استخدام أي لغات برمجة أخرى مثل JavaScript. هذه المؤشرات بسيطة وسهلة التطبيق، ويمكن استخدامها لتحسين تجربة المستخدم أثناء انتظار تحميل المحتوى.
أهمية مؤشرات التحميل:
- تحسين تجربة المستخدم: تعطي مؤشرات التحميل إشارة مرئية للمستخدم بأن الموقع يعمل على تحميل المحتوى، مما يقلل من إحساس المستخدم بالانتظار الطويل.
- تحسين الأداء: على الرغم من أن هذه المؤشرات لا تؤثر مباشرة على سرعة التحميل، إلا أنها تجعل الانتظار أكثر سلاسة.
- التصميم الجذاب: تضيف هذه المؤشرات لمسة جمالية إلى الموقع، مما يجعلها تبدو أكثر احترافية.
شرح الكود بالتفصيل
الهيكل الأساسي (HTML):
<div class="page">
<header class="header">
<h1 class="header-title">Simple CSS loaders</h1>
<p class="header-subtitle">single html element css animation</p>
</header>
<main class="container">
<div class="item">
<i class="loader --2"></i>
</div>
<div class="item">
<i class="loader --9"></i>
</div>
<div class="item">
<i class="loader --3"></i>
</div>
<div class="item">
<i class="loader --4"></i>
</div>
<div class="item">
<i class="loader --1"></i>
</div>
<div class="item">
<i class="loader --5"></i>
</div>
<div class="item">
<i class="loader --6"></i>
</div>
<div class="item">
<i class="loader --8"></i>
</div>
<div class="item">
<i class="loader --7"></i>
</div>
</main>
</div>
يتم إنشاء هيكل أساسي باستخدام <main> يحتوي على عدة <div>، كل منها يمثل مؤشر تحميل مختلف.
يتم استخدام العنصر <i> مع كلاس kisnules وكلاس إضافي مثل udes-1 لتحديد نوع المؤشر.
التنسيقات الأساسية (CSS):
.loader {
--color: white;
--size-mid: 6vmin;
--size-dot: 1.5vmin;
--size-bar: 0.4vmin;
--size-square: 3vmin;
position: relative;
width: 50%;
display: grid;
place-items: center;
}
.loader::before,
.loader::after {
content: '';
box-sizing: border-box;
position: absolute;
}
/**
loader --1
**/
.loader.--1::before {
width: var(--size-mid);
height: var(--size-mid);
border: 4px solid var(--color);
border-top-color: transparent;
border-radius: 50%;
animation: loader-1 1s linear infinite;
}
.loader.--1::after {
width: calc(var(--size-mid) - 2px);
height: calc(var(--size-mid) - 2px);
border: 2px solid transparent;
border-top-color: var(--color);
border-radius: 50%;
animation: loader-1 0.6s linear reverse infinite;
}
@keyframes loader-1 {
100% {
transform: rotate(1turn);
}
}
/**
loader --2
**/
.loader.--2::before,
.loader.--2::after {
width: var(--size-dot);
height: var(--size-dot);
background-color: var(--color);
border-radius: 50%;
opacity: 0;
animation: loader-2 0.8s cubic-bezier(0.2, 0.32, 0, 0.87) infinite;
}
.loader.--2::after {
animation-delay: 0.3s;
}
@keyframes loader-2 {
0%, 80%, 100% {
opacity: 0;
}
33% {
opacity: 1;
}
0%, 100% {
transform: translateX(-4vmin);
}
90% {
transform: translateX(4vmin);
}
}
/**
loader --3
**/
.loader.--3::before,
.loader.--3::after {
width: var(--size-dot);
height: var(--size-dot);
background-color: var(--color);
border-radius: 50%;
animation: loader-3 1.2s ease-in-out infinite;
}
.loader.--3::before {
left: calc(50% - 1.6vmin - var(--size-dot));
}
.loader.--3::after {
left: calc(50% + 1.6vmin);
animation-delay: -0.4s;
}
@keyframes loader-3 {
0%, 100% {
transform: translateY(-2.6vmin);
}
44% {
transform: translateY(2.6vmin);
}
}
/**
loader --4
**/
.loader.--4::before {
height: var(--size-bar);
width: 6vmin;
background-color: var(--color);
animation: loader-4 0.8s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}
@keyframes loader-4 {
0%, 44%, 88.1%, 100% {
transform-origin: left;
}
0%, 100%, 88% {
transform: scaleX(0);
}
44.1%, 88% {
transform-origin: right;
}
33%, 44% {
transform: scaleX(1);
}
}
/**
loader --5
**/
.loader.--5::before,
.loader.--5::after {
height: 3vmin;
width: var(--size-bar);
background-color: var(--color);
animation: loader-5 0.6s cubic-bezier(0, 0, 0.03, 0.9) infinite;
}
.loader.--5::before {
left: calc(50% - 1vmin);
top: calc(50% - 3vmin);
}
.loader.--5::after {
left: calc(50% + 1vmin);
top: calc(50% - 1vmin);
animation-delay: 0.2s;
}
@keyframes loader-5 {
0%, 88%, 100% {
opacity: 0;
}
0% {
transform: translateY(-6vmin);
}
33% {
opacity: 1;
}
33%, 88% {
transform: translateY(3vmin);
}
}
/**
loader --6
**/
.loader.--6::before {
width: var(--size-square);
height: var(--size-square);
background-color: var(--color);
top: calc(50% - var(--size-square));
left: calc(50% - var(--size-square));
animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}
@keyframes loader-6 {
0%, 100% {
transform: none;
}
25% {
transform: translateX(100%);
}
50% {
transform: translateX(100%) translateY(100%);
}
75% {
transform: translateY(100%);
}
}
/**
loader --7
**/
.loader.--7::before,
.loader.--7::after {
width: var(--size-square);
height: var(--size-square);
background-color: var(--color);
}
.loader.--7::before {
top: calc(50% - var(--size-square));
left: calc(50% - var(--size-square));
animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}
.loader.--7::after {
top: 50%;
left: 50%;
animation: loader-7 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}
@keyframes loader-7 {
0%, 100% {
transform: none;
}
25% {
transform: translateX(-100%);
}
50% {
transform: translateX(-100%) translateY(-100%);
}
75% {
transform: translateY(-100%);
}
}
/**
loader --8
**/
.loader.--8::before,
.loader.--8::after {
width: var(--size-dot);
height: var(--size-dot);
border-radius: 50%;
background-color: var(--color);
}
.loader.--8::before {
top: calc(50% + 4vmin);
animation: loader-8-1 0.8s cubic-bezier(0.06, 0.01, 0.49, 1.18) infinite;
}
.loader.--8::after {
opacity: 0;
top: calc(50% - 2vmin);
animation: loader-8-2 0.8s cubic-bezier(0.46,-0.1, 0.27, 1.07) 0.2s infinite;
}
@keyframes loader-8-1 {
0%, 55%, 100% {
opacity: 0;
}
0% {
transform: scale(0.2);
}
22% {
opacity: 1;
}
33%, 55% {
transform: scale(1) translateY(-6vmin);
}
}
@keyframes loader-8-2 {
0%, 100% {
opacity: 0;
}
33% {
opacity: 0.3;
}
0% {
transform: scale(0);
}
100% {
transform: scale(4);
}
}
/**
loader --9
**/
.loader.--9::before,
.loader.--9::after {
width: var(--size-dot);
height: var(--size-dot);
border-radius: 50%;
background-color: var(--color);
animation: loader-9 0.42s cubic-bezier(0.39, 0.31, 0, 1.11) infinite;
}
.loader.--9::before {
left: calc(50% - var(--size-dot) - 1.6vmin);
}
.loader.--9::after {
left: calc(50% + 1.6vmin);
animation-delay: 0.12s;
}
@keyframes loader-9 {
0%, 100% {
opacity: 0;
}
0% {
transform: translate(-4vmin, -4vmin);
}
66% {
opacity: 1;
}
66%, 100% {
transform: none;
}
}
/**
miscs
**/
.container {
display: grid;
grid-template-columns: repeat(3, 18vmin);
grid-template-rows: repeat(3, 18vmin);
grid-gap: 1vmin;
}
.item {
background: rgba(255, 255, 255, 0.1);
display: grid;
place-items: center;
border-radius: 4px;
transition: opacity 0.4s ease;
}
.container:hover .item {
opacity: 0.3;
}
.container:hover .item:hover {
opacity: 1;
}
.page {
margin: auto;
}
.header {
margin-bottom: 4vmin;
}
.header-title {
font-size: 3.75vmin;
}
.header-subtitle {
font-size: 2vmin;
text-transform: uppercase;
opacity: 0.6;
}
html, body {
display: flex;
width: 100%;
height: 100%;
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
font-family: 'Noto Sans', sans-serif;
color: white;
text-align: center;
letter-spacing: 0.3px;
}
يتم تعريف متغيرات CSS مثل --color و--size-mid لتسهيل التعديل على الألوان والأحجام.
يتم استخدام display: grid وplace-items: center لمركزة العناصر.
الرسوم المتحركة (Animations):
@keyframes kisnules-1 {
100% {
transform: rotate(1turn);
}
}
يتم تعريف الرسوم المتحركة باستخدام @keyframes. على سبيل المثال، kisnules-1 يقوم بتدوير العنصر 360 درجة.
تطبيق الرسوم المتحركة على العناصر:
.kisnules.udes-1::before {
width: var(--size-mid);
height: var(--size-mid);
border: 4px solid var(--color);
border-top-color: transparent;
border-radius: 50%;
animation: kisnules-1 1s linear infinite;
}
يتم تطبيق الرسوم المتحركة على العناصر باستخدام ::before و::after.
يتم استخدام animation لتطبيق الرسوم المتحركة مع تحديد المدة ونمط التكرار.
تنسيقات الشبكة (Grid Layout):
.koneydesa {
display: grid;
grid-template-columns: repeat(3, 18vmin);
grid-template-rows: repeat(3, 18vmin);
grid-gap: 1vmin;
}
يتم استخدام تخطيط الشبكة (Grid) لترتيب العناصر في صفوف وأعمدة.
تأثيرات التمرير (Hover Effects):
.koneydesa:hover .item {
opacity: 0.3;
}
.koneydesa:hover .item:hover {
opacity: 1;
}
يتم إضافة تأثيرات عند تمرير الماوس فوق العناصر، حيث يتم تقليل شفافية العناصر غير المحددة وزيادة شفافية العنصر المحدد.
الخلاصة:
الكود المقدم يعرض مجموعة متنوعة من مؤشرات التحميل التي يمكن استخدامها بسهولة في أي موقع ويب. هذه المؤشرات تعتمد فقط على CSS، مما يجعلها خفيفة وسهلة التطبيق. يمكن تعديل الألوان والأحجام والرسوم المتحركة بسهولة لتناسب تصميم الموقع. تُعد هذه المؤشرات أداة فعالة لتحسين تجربة المستخدم وجعل الموقع أكثر جاذبية.
