آموزش ساخت یک Loading با Css3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

loading-css

جهت مشاهده دمو آموزش کلیک کنید

بخش های زیادی در سایت جهت بالا بردن اطلاعات بازدید کنندگان ایجاد شده است که یکی از آنها Css3 می باشد . هفته پیش مباحث اصلی و ویژگیهای جدیدی که به Css  اضافه شده بود را به صورت کامل همراه با مثال های کاربردی از سایت w3schools آموزش داده ام .
معمولا وقتی یک مبحث آموزشی ، توضیح داده می شود باید معلم یا فردی که دارد آن مبحث را آموزش میدهد برای درک بهتر مخاطب ، چند مثال به صورت قابل فهم بیان کند تا کاربرد موارد آموزش داده شده در ذهن فرد مقابل جای بگیرد و به راحتی بتواند با مواردی که یاد گرفته است ایده های جدید خلق کند .
تا به حال سایت هایی که با نرم افزار ادوب فلش طراحی شده است را دیده اید ؟ اگر سرعت اینترنت شما پایین باشد که حتما در ایران به همین صورت هست ، یک تصویر که معروف به Loading هست را مشاهده می کنید که در حال چرخش می باشد یا یک کادر مستطیل شکل هست که از صفر تا 100 در حال حرکت است ، حال میخواهم یکی از این تصاویر را با Css3 برای شما طراحی کنم و هر قسمت را به صورت کامل برای شما آموزش بدهم .

1. ابتدا  نرم افزار دریم ویور را اجرا کنید . (در صورتیکه نرم افزار دریم ویور بر روی سیستم شما نصب نشده است می توانید از یک نرم افزار ویرایشگر متن مثل Nootpad++ استفاده کنید یا از نرم افزار نوت پد خود ویندوز) 

برای شروع باید یک فایل Html و یک فایل Cssایجاد کنیم . (یک فولدر بر روی دسکتاپ یا یکی از درایوهایتان ایجاد کنید و هر دو فایل را داخل آن ذخیره کنید )
بر روی کلید File کلیک کرده و گزینه New را انتخاب کنید .  صفحه New Document باز می شود  .یکبار بر روی گزینه Html و بار دیگر گزینه Css را انتخاب کنید . یک نام دلخواه برای دو فایل قرار داده و در پوشه مورد نظر ذخیره کنید .  

Css-Dropdown-menu1

Css-Dropdown-menu2

برای ذخیره کردن هر دو فایل هم ، بر روی کلید File کلیک کرده و گزینه Save as را انتخاب کنید .  یک نام دلخواه برای هر دو فایل تایپ میکنم. فایل اصلی index.html و فایل مربوط به تغییرات ظاهری با نام loading.css می باشد

Css-Dropdown-menu3

2. ابتدا عنوان صفحه را در بین تگ Title وارد میکنم . این عنوان در مرورگر نمایش داده می شود  . (اگر از نوت پد یا هر ویرایشگر دیگری استفاده می کنید که کدهای ابتدایی Html درون آن وجود ندارد ، کدهای زیر را کپی کرده و در فایل html قرار بدهید و ذخیره کنید)


    

<!DOCTYPE html >
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Css3 Loading Animation Experiment</title>
</head>
<body>
</body>
</html>

3.حالا باید از فایل html به Css لینک بدهیم . برای انجام اینکار از کد زیر در بین تگ head استفاده می کنم .  مسیر فایل css باید در قسمت href قرار بگیرد


<link rel='stylesheet'  href='loading.css'  type='text/css' />

4. روش کار به این شکل هست که قسمت های اصلی بدنه یک صفحه که در وب باید نمایش داده شود بوسیله صفحه index.html (می تواند نام دلخواه داشته باشد)مشخص می شود و تغییرات ظاهری مربوط به هر قسمت با فایل Css .
تمام کدهای اصلی یک وب سایت در قسمت یا تگ body تایپ می شود .
بدنه این لودر تشکیل شده از یک کلاس با نام loading-wrap همراه با سه زیر مجموعه که برای سه مثلث می باشد با نام های triangle1 , triangle2 ,triangle3
هر 3 قسمت را در فایل index.html بین دو تگ body تایپ میکنم . ابتدا کد مورد نظر و در مرحله بعدی قسمت کلی کدرا تایپ میکنم تا بهتر متوجه بشوید .
شما باید 5 خط کد زیر را بین تگ body تایپ کنید .


<div class='loading-wrap'>
  <div class='triangle1'></div>
  <div class='triangle2'></div>
  <div class='triangle3'></div>
</div>

 

ساختار کلی کد به شکل زیر می باشد . می توانید در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید . 


<!DOCTYPE html >
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<link rel='stylesheet' href='loading.css'  type='text/css' />
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Css3 Loading Animation Experiment</title>
</head>
    <body>
            <div class='loading-wrap'>
                 <div class='triangle1'></div>
                 <div class='triangle2'></div>
                 <div class='triangle3'></div>
            </div>
    </body>
</html>

5. بعد از اینکه قسمت های اصلی بدنه در فایل index.html تنظیم شد وارد فایل loading.css شوید تا تنظیمات مربوط به ظاهر کادر را اعمال کنیم .
در ابتدا عرض ، ارتفاع ، نحوه قرارگیری در صفحه ، فاصله از بالا ، فاصله از طرف چپ صفحه ، نحوه قرار گیری در وسط کادر ، رنگ پس زمینه کادر ، انیمیشن و گرد کردن لبه های کادر را مشخص می کنیم . 


.loading-wrap {
   width: 60px; 
   height: 60px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -30px 0 0 -30px;
   background: #777;      
   animation: rotation ease-in-out 2s infinite;
   border-radius: 30px;      
}

 

circle

6. نوبت میرسه به کشیدن سه مثلث کوچک  در فایل css . ابتدا هر سه کلاس .triangle1, .triangle2, .triangle3 را در فایل css فراخوانی کرده و مشخصات را آن را وارد میکنم .


.triangle1, .triangle2, .triangle3 {
  border-width: 0 20px 30px 20px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #67cbf0;
  height: 0; width: 0;
  position: absolute;
  left: 10px; top: -10px;
  animation: fadecolor 2s 1s infinite;
}

 

circle-2

 

 

 

7. در مرحله 6 هر سه مثلث ساخته شده است . در این مرحله باید 2 مثلثی که پشت مثلث شماره 1 پنهان شده است را در جای خودش قرار بدهیم  .


.triangle2, .triangle3 {
  top: 20px;
  left: 30px;
  animation-delay: 1.1s;
}
.triangle3 {
  left: -10px;
  animation-delay: 1.2s;
}

 

circle-3

8. در مرحله آخر هم با استفاده از Keyframe که در قسمت انیمیشن Css3  آموزش داده شده است یک افکت انیمیشن به هر 3 مثلث نسبت میدهیم


@keyframes rotation {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}
@keyframes fadecolor {
    0% {border-bottom-color: #eee;}
    100%{border-bottom-color: #67cbf0;}
}

جهت مشاهده دمو آموزش کلیک کنید

 

آخرین بروز رسانییکشنبه, 10 خرداد 1394 13:59

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #1 ایمان 1396-07-18 21:45
با سلام
اولا ممنون از سایت خوب و مفیدتون.
و یک سوال برام پیش اومده.
چه کدی باید بزنم و بگم تا لود کامل صفحه لودینگ رو نشون بده؟
با تشکر
نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»