آموزش ساخت انواع علامت انتظار(Pre-loaders)

آموزش ساخت انواع علامت انتظار(Pre-loaders)

در این آموزش ما قصد داریم تا به شما نحوه ایجاد چند عدد علامت انتظار(Pre-loaders) رو بدیم.همانطور که میدانید از علامت های انتظار اکثرا در وبسایت ها پیش از بارگذاری مطلب اصلی استفاده میشود.به عبارتی این علامت ها به کاربران میگویند تا منتظر باشند تا مطلب مورد نظر نمایش داده شود.

ما بر خلاف روال معمول پیش نمایش هر کد را در جلوی نام آن قرار خواهیم داد.اما قبل از آن باید به توضیحاتی که دانستن آنها قبل از نوشتن کد لازم است توجه بفرمایید.

ملزومات CSS برای ایجاد علامت های انتظار:

ما قبل از اینکه به سراغ نوشتن کدها برویم ،باید در مورد برخی از ویژگی های CSS که برای نوشتن و ایجاد علامت های انتظار ضروری است بحث بکنیم.

شبه عناصر(Pseudo Element):

before: و after:

شبه عناصر واقعا در ایجاد علامت های انتظار با استفاده از CSS مفید هستند.شبه عناصر اساسا یک عنصر جعلی قبل یا بعد از عنصر HTML مورد نظر ایجاد می کنند.

شبه عناصر برای نوشتن CSS گرچه مفید هستند ولی ضروری نیستند.اما برای اینکه ما بتوانیم از انیمیشن در کدهای CSS استفاده کنیم باید از شبه عناصر استفاده نماییم زیرا بدون اینها نمایش انیمیشن با شکست (fail) مواجه خواهد شد.

خوب حالا به سراغ نوشتن انواع علامت انتظار میرویم.

۱-موج صدا(Audio Wave):

برای مشاهده لینک وارد شود

HTML

تنها کاری که ما در اینجا انجام داده ایم ایجاد ۵ تا span است که هریک برای نمایش یکی از خط موج ها است.

<div id="preloader_1">
      		<span></span>
  			<span></span>
  			<span></span>
  			<span></span>
  			<span></span>
  		</div>

CSS

ما برای ایجاد افکت مورد نظر طول هر span را از ۵ تا ۳۰ پیکسل تعیین کردیم.همچنین spanها در راستای محور Y به اندازه ۱۵ پیکسل از مرکز شروع به بزرگ و کوچک شدن می کنند.

#preloader_1{
    position:relative;
}
#preloader_1 span{
    display:block;
    bottom:0px;
    width: 9px;
    height: 5px;
    background:#9b59b6;
    position:absolute;
    animation: preloader_1 1.5s  infinite ease-in-out;
}
 
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
 
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
    ۰% {height:5px;transform:translateY(0px);background:#9b59b6;}
    ۲۵% {height:30px;transform:translateY(15px);background:#3498db;}
    ۵۰% {height:5px;transform:translateY(0px);background:#9b59b6;}
    ۱۰۰% {height:5px;transform:translateY(0px);background:#9b59b6;}
}

۲-مربع دایره ای(Circular Square):

برای مشاهده لینک وارد شود

HTML

در این علامت ،یک مربع با حرکت،چرخش و تغییر رنگ تبدیل به ۴ عدد دایره خواهد شد.این علامت از چهار span تشکیل شده است که هر یک،یک دایره/مربع است که توسط انیمیشنی به یکدیگر تبدیل میشوند.

<div id="preloader_2">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

CSS

برای تبدیل کردن مربع ها به دایره ما فقط از border radius استفاده کردیم که از ۰(مربع) تا ۲۰ پیکسل(دایره) تغییر می کند.

#preloader_2{
position: relative;
left: 50%;
width: 40px;
height: 40px;
}
#preloader_2 span{
    display:block;
	bottom:0px;
	width: 20px;
	height: 20px;
	background:#9b59b6;
	position:absolute;
}
#preloader_2 span:nth-child(1){
animation: preloader_2_1 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(2){
left:20px;
animation: preloader_2_2 1.5s infinite ease-in-out;

}
#preloader_2 span:nth-child(3){
top:0px;
animation: preloader_2_3 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(4){
top:0px;
left:20px;
animation: preloader_2_4 1.5s infinite ease-in-out;
}

@-keyframes preloader_2_1 {
    ۰% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    ۵۰% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
    ۸۰% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
     ۱۰۰% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_2 {
    ۰% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    ۵۰% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
    ۸۰% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    ۱۰۰% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3 {
    ۰% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    ۵۰% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
    ۸۰% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
     ۱۰۰% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}


@-keyframes preloader_2_4 {
    ۰% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    ۵۰% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
    ۸۰% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
     ۱۰۰% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}

همچنین هر یک از آنها در راستای محور X و Y چرخیده و جابجا میشوند و سپس به جای اصلی خود بر می گردند.همچنین رنگ هر یک از آنها نیز تغییر می کند.

۳-عبور اشکال(Crossing Shape):

برای مشاهده لینک وارد شود

HTML

برای ایجاد این علامت ما فقط از یک تگ div استفاده کرده ایم که توسط شبه عناصر before: و after: که قبلا صحبت کردیم استفاده خواهد شد.

<div id="preloader_3"></div>

CSS

#preloader_3{
    position:relative;
}
#preloader_3:before{
	width:20px;
	height:20px;
	border-radius:20px;
	background:blue;
	content:'';
	position:absolute;
	background:#9b59b6;
	animation: preloader_3_before 1.5s infinite ease-in-out;
}

#preloader_3:after{
	width:20px;
	height:20px;
	border-radius:20px;
	background:blue;
	content:'';
	position:absolute;
	background:#2ecc71;
	left:22px;
	animation: preloader_3_after 1.5s infinite ease-in-out;
}

@keyframes preloader_3_before {
    ۰% {transform: translateX(0px) rotate(0deg)}
    ۵۰% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      ۱۰۰% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
    ۰% {transform: translateX(0px)}
    ۵۰% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
  	۱۰۰% {transform: translateX(0px)}
}

یک انیمیشن در داخل preloader_3:before# و دیگری در داخل preloader_3:after# قرار داده شده است.هر انیمیشن در زمان محتلف به رنگ دیگری تبدیل میشود.مانند مثال قبل که هر شبه جمله با استفاده از border radius از دایره به مربع تبدیل می شد.

۴-خزیدن مار(The Snake):

برای مشاهده لینک وارد شود

HTML

در اینجا نیز ما با استفاده از چند Span و با استفاده از شبه عناصر befor وafter این کار را انجام خواهیم داد.

<div id="preloader_4">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

CSS

نحوه ایجاد انیمیشن این علامت به این صورت است که هر یک از دایره ها در راستای محور Y به اندازه ۱۰ – پیکسل چرخیده و رنگشان از آبی به زرد تغییر خواهد کرد.برای ایجاد سایه در زیر هر یک ما از خاصیت shadow size استفاده کردیم که از ۰ تا ۲۰ پیکسل متغییر است.

#preloader_4{
    position:relative;
}
#preloader_4 span{
	position:absolute;
	width:20px;
	height:20px;
	background:#3498db;
	opacity:0.5;
border-radius:20px;
	-animation: preloader_4 1s infinite ease-in-out;

}
#preloader_4 span:nth-child(2){
	left:20px;
	animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
	left:40px;
	animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
	left:60px;
	animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
	left:80px;
	animation-delay: .8s;
}
@keyframes preloader_4 {
    ۰% {opacity: 0.3; transform:translateY(0px);    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    ۵۰% {opacity: 1; transform: translateY(-10px); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
  	۱۰۰%  {opacity: 0.3; transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}

شبیه علامت اول ما با اضافه کردن animation-delay به هر span و تعیین میزان تاخیر هر یک به اندازه ۲ میلی ثانیه شکل خزیدن و موجی مار را ایجاد کردیم.

۵-چرخ ریسندگی(Spinning Disk):

برای مشاهده لینک وارد شود

HTML

در این علامت نیز ما از یک تگ div استفاده کردیم که با استفاده از شبه عنصر after خطوط بیرونی دایره را ایجاد کرده ایم.

 <div id="preloader5"></div>

CSS

برای ایجاد دو خط بیرونی  ما به بالا و پایین حاشیه() اضافه کردیم و مقدار border-radius را ۵۰ پیکسل در نظر گرفتیم.انیمیشن به تگ اصلی اضافه خواهد شد و فقط برای تغییر رنگ و چرخش باید ()transform: rotate را به آن اضافه کنیم.برای تغییر رنگ خطور بیرونی از شبه عنصر after استفاده خواهیم کرد.

#preloader5{
    position:relative;
	width:30px;
	height:30px;
	background:#3498db;
	border-radius:50px;
	animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
	position:absolute;
	width:50px;
	height:50px;
	border-top:10px solid #9b59b6;
	border-bottom:10px solid #9b59b6;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-radius:50px;
	content:'';
	top:-20px;
	left:-20px;
	animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
    ۰% {transform: rotate(0deg);}
    ۵۰% {transform: rotate(180deg);background:#2ecc71;}
    ۱۰۰% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
    ۰% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    ۵۰% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    ۱۰۰% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

۶-پنجره نورانی چرخان(Glistening Window):

برای مشاهده لینک وارد شود

HTML

این علامت توسط یک تگ div و چهار عدد span برای هر  مربع ایجاد خواهد شد.

<div id="preloader6">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

CSS

این مربع ها شبیه شبکه به هم  متصل خواهند بود و دور یک محور خواهند چرخید.انیمیشن به تگ اصلی برای چرخاندن هر مربع  اضافه خواهد شد.انیمیشن دوم که برای تغییر اندازه مربع ها از ۱۰۰% به ۵۰% است به span ها اضافه خواهد شد و در آخر هم ما با استفاده از animation-delay افکت خود را ایجاد خواهیم کرد.

#preloader6{
    position:relative;
	width: 42px;
	height: 42px;
	animation: preloader_6 5s infinite linear;
}
#preloader6 span{
	width:20px;
	height:20px;
	position:absolute;
	background:red;
	display:block;
	animation: preloader_6_span 1s infinite linear;
}
#preloader6 span:nth-child(1){
background:#2ecc71;

}
#preloader6 span:nth-child(2){
left:22px;
background:#9b59b6;
	animation-delay: .2s;

}
#preloader6 span:nth-child(3){
top:22px;
background:#3498db;
	animation-delay: .4s;
}
#preloader6 span:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
	animation-delay: .6s;
}
@keyframes preloader_6_span {
   ۰% { transform:scale(1); }
   ۵۰% { transform:scale(0.5); }
   ۱۰۰% { transform:scale(1); }
}

 

پایان

0
0


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

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


چهار + = 6