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

Закладки نوار پردازش آندروید با 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 بازدید - 886 نظرات - 0
امتیاز
زیر مجموعه
جهت استفاده از تمامی امکانات سایت عضو شوید!

مزایا عضویت در سایت تفریحی سپهنا :
ارايه پروفایل! ارسال مطلب به سایت!ذخیره پست ها ! استفاده از پیام خصوصی و ...

مطالب مشابه