ایجاد Loading با CSS3

حتما شما تا به حال دیده اید که وقتی صفحه ای در حال بارگذاری است ، گاهی اوقات یک تصویر GIF برای شما ظاهر می‌شود ،که نشان دهنده بارگذاری صفحه می‌باشد ، ما در این قسمت قصد داریم این تصویر را با با استفاده از CSS3 ایجاد نمائیم .

در ابتدا برای مشاهده خروجی کلیک نمائید!

در ابتدا یک تگ Style ایجاد نمائید ، سپس کد زیر را درون آن قرار دهید :

<style type="text/css">
.loading {
text-align: center;
}
.loading span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: blue;
border-radius: 50px;
-webkit-animation: loading 0.9s infinite alternate;
-moz-animation: loading 0.9s infinite alternate;
}
.loading span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.loading span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
@-webkit-keyframes loading {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
@-moz-keyframes loading {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}
</style>

حال وقت توضیح دادن خط به خط کد می‌باشد :

در ابتدا یک کلاس loading ایجاد نموده ایم ، که display آن را برابر با inline قرار داده ایم ، یعنی به صورت افقی به نمایش در بیاید.سپس با استفاده از دستور moz-animation سرعت انیمشن را تنظیم نموده ایم .

nth-of-type : همانطور که شما خروجی کد فوق را مشاهده نمودید ، ما دارای سه توپ انیمیشنی هستیم ، با استفاده از دستور nth-of-type هر تو را با استفاده از شماره یعنی 1 و 2 و 3 مشخص می‌کنیم و به آن‌ها دستورات خود را اضافه می‌نمائیم .

.loading span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: black;
border-radius: 50px;
-webkit-animation: loading 0.9s infinite alternate;
-moz-animation: loading 0.9s infinite alternate;
}
.loading span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.loading span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}

بخش اصلی انیمیشن ما :

برای ایجاد تحرک یا انیمشین در css3 از دستور keyframes استفاده می‌شود :

@-webkit-keyframes loading {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
@-moz-keyframes loading {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}

همانطور که کد فوق را مشاهده نمودید ، ما با استفاده از دستور keyframes نام کلاس خود را فراخوانی نموده ایم . قسمت‌های 0 درصد نقطه شروع انیمیشن ما هستند و قسمت‌های 100 درصد نقطه پایان انیمیشن می‌باشند .( در این دو قسمت شما می‌توانید کد‌های مورد نظر خود را تایپ نمائید).

دستور translateY باعث می‌شود توپ‌ها در مکان‌های مختلفی جا به جا شوند.

سپس با استفاده از دستور فوق می‌توانید style خود را فراخوانی نمائید :

<div class="loading">
<span></span>
<span></span>
<span></span>
</div>

سوالی داشتید حتما در قسمت نظرات بپرسید!!!

نویسنده

میلاد حیدری

19 ساله، ساکن تهران و دانشجوی مهندسی کامپیوتر ؛طراح وب سایت ، سئو کار با سابقه کاری ، مطالعه بسیار زیاد در امر سئو و برندینگ اینترنتی و آشنایی با زبان های همچون PHP,JavaScript,html5,CSS3, Jquery ، با زبان انگلیسی آشنایی کامل دارم و شدیدا طرفدار استقلال و فرهاد مجیدی هستم.