عضویت در گروه جوکسرا
16 تیر 1393
کد خبر : 1809

نوار پردازش آندروید با css

نوار پردازش آندروید

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


دمو آنلاین

 

کد css :


 

body{
background:#222;
margin: 40px 50px;
}
h1{
color:#4a8df8;
font-family: 'Raleway', cursive;
font-weight:100;
font-stretch:normal;
font-size:3em;
}
.slider{
position:absolute;
width:400px;
height:2px;
margin-top:-30px
}
.line{
position:absolute;
background:#4a8df8;
width:400px;
height:2px;
}
.break{
position:absolute;
background:#222;
width:6px;
height:2px;
}
 
.dot1{
-webkit-animation: loading 2s infinite;
-moz-animation: loading 2s infinite;
-ms-animation: loading 2s infinite;
-o-animation: loading 2s infinite;
animation: loading 2s infinite;
}
.dot2{
-webkit-animation: loading 2s 0.5s infinite;
-moz-animation: loading 2s 0.5s infinite;
-ms-animation: loading 2s 0.5s infinite;
-o-animation: loading 2s 0.5s infinite;
animation: loading 2s 0.5s infinite;
}
.dot3{
-webkit-animation: loading 2s 1s infinite;
-moz-animation: loading 2s 1s infinite;
-ms-animation: loading 2s 1s infinite;
-o-animation: loading 2s 1s infinite;
animation: loading 2s 1s infinite;
}
 
@keyframes "loading" {
from { left: 0; }
to { left: 400px; }
}
@-moz-keyframes loading {
from { left: 0; }
to { left: 400px; }
}
@-webkit-keyframes "loading" {
from { left: 0; }
to { left: 400px; }
}
@-ms-keyframes "loading" {
from { left: 0; }
to { left: 400px; }
}
@-o-keyframes "loading" {
from { left: 0; }
to { left: 400px; }

کد html :


 
<h1>sepahna.ir</h1>
<div class="slider">
 <div class="line"></div>
 <div class="break dot1"></div>
 <div class="break dot2"></div>
 <div class="break dot3"></div>
</div>

 

وب / آموزش های وب sepahna 4 479 بازدید 0 نظر پرینت
  • +5

دیدگاه خود را ثبت کنید :

نام شما :*
ایمیل شما :
نظر شما :