%20(3).jpeg)
التحميل مثل facebook
التحميل في الخلفية مثل الفيسبوك باستخدام css فقط..
ملحوظة : قمت باستخدام هذه الخاصية في مدونتنا.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes placeHolderShimmer{
0%{
background-position: -468px 0
}
100%{
background-position: 468px 0
}
}
.linear-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 1000px 104px;
height: 200px;
position: relative;
overflow: hidden;
}
.inter-draw{
background: #FFF;
width: 100%;
height: 100px;
position: absolute;
top: 100px;
}
.inter-right--top{
background: #FFF;
width: 100%;
height: 20px;
position: absolute;
top: 20px;
left: 100px;
}
.inter-right--bottom{
background: #FFF;
width: 100%;
height: 50px;
position: absolute;
top: 60px;
left: 100px;
}
.inter-crop{
background: #FFF;
width: 20px;
height: 100%;
position: absolute;
top: 0;
left: 100px;
}
</style>
<body>
<div class="linear-background">
<div class="inter-draw"></div>
<div class="inter-crop"></div>
<div class="inter-right--top"></div>
<div class="inter-right--bottom"></div>
</div>
</body></html>
شرح الاضافة
باستخدام animation تم تحريكها بسرعة 1 ثانية علي خلفية ثابتة حيث اسم تحريك الانيميشنplaceHolderShimmer بخلفية من اربعة ألوان و يتم التحريك الي مالا نهاية
انظر النتيجة من هنا
See the Pen تحميل مثل فيسبوك by for 3araby (@for_3araby) on CodePen.
ليست هناك تعليقات:
شارك مع اصدقائك: