You are on page 1of 3

==CSS loading facebook or css

loading============================================================================
==============
[class*="box-"] {
height: 6px;
width: 400px;
background: #eee;
margin-bottom: 13px;
margin-right: 5px;
}

.box-loading {
background: #fff;
height: 175px;
width: 100%;
margin: 7px 0;
padding: 20px;
display: block;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-o-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.box-thumbnail {
height: 40px;
width: 40px;
float: left;
margin-right: 10px;
}

.box-line-sm {
width: 120px;
margin-top: 10px;
overflow: hidden;
}

.box-line-xs {
width: 80px;
overflow: hidden;
}

.box-line-df {
margin-top: 30px;
clear: both;
width: 380px;
}

.box-line-lg {
width: 200px;
}

.box-line-lgx {
width: 450px;
}
[class*="box-line"],
.box-thumbnail {
animation: timeline;
animation-duration: 1.2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px auto;
}
@keyframes timeline {
0% {
background-position: -350px 0;
}
100% {
background-position: 400px 0;
}
}

==find and edit


==>../layout/home/content.phtml====================================================
======================================

<div class="white-loading list-group">


<div class="cs-loader">
<div class="cs-loader-inner">
<label> </label>
<label> </label>
<label> </label>
<label> </label>
<label> </label>
<label> </label>
</div>
</div>
</div>

==to===============================================================================
===========

<div class="box-loading">
<div class="box-thumbnail"></div>
<div class="box-line-sm"></div>
<div class="box-line-xs"></div>
<div class="box-line-df"></div>
<div class="box-line-lgx"></div>
<div class="box-line-lg"></div>
</div>

==Edit again==> .../javascript/script.js


===================================================================================
=======

<div class="white-loading list-group"><div class="cs-loader"><div class="cs-loader-


inner"><label> </label><label> </label><label> </label><label> </label><label>
</label><label> </label></div></div></div>

==to===============================================================================
===========

<div class="box-loading"><div class="box-thumbnail"></div><div class="box-line-


sm"></div><div class="box-line-xs"></div><div class="box-line-df"></div><div
class="box-line-lgx"></div><div class="box-line-lg"></div></div>

You might also like