Scribd
Upload
213 views3 pages

Change Loading For Wowonder

This document contains CSS code for styling loading indicators. It defines various classes for boxes, lines, and thumbnails of different sizes that can be used to create a loading animation. When applied, elements with these classes will have animated linear gradients to create a timeline-style loading effect. The document also shows examples of code being updated to replace existing loading indicators with elements using these new classes.

Uploaded by

Apik IMcyber
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
213 views3 pages

Change Loading For Wowonder

This document contains CSS code for styling loading indicators. It defines various classes for boxes, lines, and thumbnails of different sizes that can be used to create a loading animation. When applied, elements with these classes will have animated linear gradients to create a timeline-style loading effect. The document also shows examples of code being updated to replace existing loading indicators with elements using these new classes.

Uploaded by

Apik IMcyber
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 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