تخفیف ویژه

ایجاد Loading با CSS3

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۱۱ مرداد ۱۳۹۱

حتما شما تا به حال دیده اید که وقتی صفحه ای در حال بارگذاری است ، گاهی اوقات یک تصویر 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 سرعت انیمشن را تنظیم نموده ایم .

نکته :

در بخش animation نام loading را فراخوانی نموده ایم ، این نام همان نامی است که با استفاده از دستور keyframes به بخش انیمشین خود اختصاص داده ایم.

نکته :

خاصیت infinite alternate باعث می‌شود ، تصویر ما پی در پی اجرا شود.

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 ، با زبان انگلیسی آشنایی کامل دارم و شدیدا طرفدار استقلال و فرهاد مجیدی هستم.

نظرات کاربران

R0nika

سلام
ميشه آموزش بخش pseudo classe در CSS رو هم بذاريد؟
ممنون از زحماتتون

میلاد حیدری

بله حتما ، ان شاالله یک جلسه را به این محبث یعنی شبه کلاس ها در css خواهیم داد ، اما اگر بخواهم برای شما دوست عزیز در همین جا یک توضیح کوتاه بدهم ، Pseudo-classes انواع حالت ها رو مشخص میکنند ، مثلا فرض کنید که شما میخواهید یک متنی را ایجاد نمائید که وقتی اشاره گر ماوس رو آن قرار گرفت به رنگ قرمز تبدیل شود ، برای اینکار از حالت hover استفاده می کنید و یا…. موضوعات دیگر ، در css حدودا 10 ، شبه کلاس وجود داره

psdk

یه سر به سایت زیر بزنید خیلی راحت میتونید لودینگ بسازید با css و کدشو بگیرین و استفاده کنید
http://cssload.net/
😀 😀 😉 😉 💡

hesam.s.pc

salam
ببینم من از کجا میتونم نرم افزارcss3 lodingرو دانلود کنم؟
لطفا سریع

ریحانی

برخی سایت ها کنار صفحه خودشان کنار اسکرول بار یک سی اس اس دارن که به صفحه ایی خاص اشاره می کند

ریحانی

می خواستم خواهش کنم یک کدی برای من محبت کنید که مانند css هایی که کنار صفحه می آد و به صفحه ی دیگه اشاره می کنه
css عمودی وسط صفحه
ممنون

میلاد حیدری

ببخشید ولی من نفهمیدم چی شد؟؟؟

سامان

منظور آقا/خانم ریحانی اینه که لینکهای هایی که جاشون رو صفحه پابته و با حرکت اسکرول،حرکت نمیکنن و یه جا ثابتن.

فتوحی

خیلی ممنون، نهایت لطفتونه که جواب میدین، هرچند کمکی به من نشد ولی سایتتون عالیه و براتون آرزوی موفقیت روزافزون میکنم.

سامان

سلام دوست عزیز .
میتونی به این صفحه مراجعه کنی
http://www.poroje.bia2internet.com/proje.aspx?id=51

میلاد حیدری

خواهیش میکنم ، ممنون از معرفی کتاب ها

فتوحی

خیلی ممنون که وقت گذاشتید و جوابمو دادید 😳
آخه من مبتدی هستم و خیلی عجله ای واسه پایان نامم دارم یه سایت فروشگاه الکترونیکی طراحی میکنم البته یه کلاس مقدماتی فشرده رفتم که فقط در حد آشنایی و ناقص بود، شرمنده آخه این زبانها و کدها و … رو با هم قاطی کردم رفت 😥

من دقیقا کد کامل نظردهی توی سایت رو میخام(مثل همین کاری که الان دارم انجام میدم اینجا) کامنت گذاشتن، البته کجا بذارم و اتصالات و ایناشم نمیدونم 🙁
همچنین کدنویسی ارسال به ایمیل و اینکه کجای کدها بذارم و چطوری اتصال بدمش به سرور و کلاً ارسال ایمیل
باید پایان ناممو به زبون ASP.NET و ویژوال بیسیک بنویسم، تا آخر مرداد هم باید تحویلش بدم 😐
اتفاقاتی افتاد که من تا الان نتونستم طراحی سایتمو جدی دنبال کنم واسه همین مزاحم وقت شریف شماها شدم، ببخشید اگه با سوالام خستتون میکنم ولی بدونین که اجرتون پیش خدا محفوظه آخه زکات علم یاد دادن اون به دیگرانه.

لقمان آوند

سلام
خواهش میکنم . ما تا جایی که وقتمون اجازه بده پاسخ دوستان رو میدیم . ولی متاسفانه باید بگم که ما در زمینه ASP وASP.NET تخصصی نداریم و از این لحاظ کمکی نمیتونیم بکنیم . سرچ کنید . ان شاءالله که منابع بهتری در این زمینه پیدا خواهید کرد .

احسان امیدی

سلام آقا لقمان چرا مطلب من هنوز تایید نشده؟؟؟ 😕
اگه مطالب رو نمیخواید بگید…..

لقمان آوند

سلام
ببخشید . تازه دیدم احسان جان . منتشر شد .
راستی یه سر برو پروفایلت و قسمت زندگی نامه رو پر کن . چون زیر پستات نمایش داده میشه . تخصص ها و علاقمندی هاتو در حد دو الی چهار جمله بنویس .
منتظر مطالب بعدیت هستیم .
موفق باشی .

فتوحی

سلام خسته نباشید
یه سوال: یعنی این کدها الان به زبان سی شارپه؟ کاش بیشتر تو زمینه ی ASP.net و VB کار میکردین، من خیلی بهش نیاز دارم
لطفا فرم نظردهی به سایت و طریقه اتصال به ایمیل از طریق سایت رو به زبان ASP.net و VB رو برام بنویسید، ممنون میشم و دعاگوتون.

[email protected]

سلام
دوست عزيز،ميشه بفرماييد دقيقا چه كدي رو ميخوايد؟منظورم كد ويژوال هست كه تو نظرتون گفتيد
ممنون

میلاد حیدری

دوست عزیز این ها کد های css و css3 هستند . سی شارپ؟؟؟!!!

در ضمن با عرض پوزش فعلا برنامه ای برای asp.net نداریم

meraj

سلام.
خیلی خوب بود فقط میشه کد قرار دادن لودینگ در صفحه رو بزارید تا از این آموزش استفاده کنیم؟
ممنون.

میلاد حیدری

به روی چشم!!!

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :