ایجاد Loading با css3

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

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

در ابتدا یک تگ Style ایجاد کنید و سپس کد زیر را درون آن بگذارید :

 

1 <style type="text/css">
2 .loading {
3 text-align: center;
4 }
5 .loading span {
6 display: inline-block;
7 vertical-align: middle;
8 width: 10px;
9 height: 10px;
10 margin: 50px auto;
11 background: blue;
12 border-radius: 50px;
13 -webkit-animation: loading 0.9s infinite alternate;
14 -moz-animation: loading 0.9s infinite alternate;
15 }
16 .loading span:nth-of-type(2) {
17 -webkit-animation-delay: 0.3s;
18 -moz-animation-delay: 0.3s;
19 }
20 .loading span:nth-of-type(3) {
21 -webkit-animation-delay: 0.6s;
22 -moz-animation-delay: 0.6s;
23 }
24 @-webkit-keyframes loading {
25 0% {
26 width: 10px;
27 height: 10px;
28 opacity: 0.9;
29 -webkit-transform: translateY(0);
30 }
31 100% {
32 width: 24px;
33 height: 24px;
34 opacity: 0.1;
35 -webkit-transform: translateY(-21px);
36 }
37 }
38 @-moz-keyframes loading {
39 0% {
40 width: 10px;
41 height: 10px;
42 opacity: 0.9;
43 -moz-transform: translateY(0);
44 }
45 100% {
46 width: 24px;
47 height: 24px;
48 opacity: 0.1;
49 -moz-transform: translateY(-21px);
50 }
51 }
52 </style>

اکنون به توضیح خط به خط کد می پردازیم :

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

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

نکته : خاصیت infinite alternate سبب می گردد تا تصویر  پی در پی اجرا گردد.

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

 

1 .loading span {
2 display: inline-block;
3 vertical-align: middle;
4 width: 10px;
5 height: 10px;
6 margin: 50px auto;
7 background: black;
8 border-radius: 50px;
9 -webkit-animation: loading 0.9s infinite alternate;
10 -moz-animation: loading 0.9s infinite alternate;
11 }
12 .loading span:nth-of-type(2) {
13 -webkit-animation-delay: 0.3s;
14 -moz-animation-delay: 0.3s;
15 }
16 .loading span:nth-of-type(3) {
17 -webkit-animation-delay: 0.6s;
18 -moz-animation-delay: 0.6s;
19 }

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

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

1 @-webkit-keyframes loading {
2 0% {
3 width: 10px;
4 height: 10px;
5 opacity: 0.9;
6 -webkit-transform: translateY(0);
7 }
8 100% {
9 width: 24px;
10 height: 24px;
11 opacity: 0.1;
12 -webkit-transform: translateY(-21px);
13 }
14 }
15 @-moz-keyframes loading {
16 0% {
17 width: 10px;
18 height: 10px;
19 opacity: 0.9;
20 -moz-transform: translateY(0);
21 }
22 100% {
23 width: 24px;
24 height: 24px;
25 opacity: 0.1;
26 -moz-transform: translateY(-21px);
27 }
28 }

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

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

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

 

1 <div class="loading">
2 <span></span>
3 <span></span>
4 <span></span>
5 </div>

ارسال نظر