Skip to content

Instantly share code, notes, and snippets.

@calosth
Created October 19, 2014 03:10
Show Gist options
  • Save calosth/13f732b594878602d71c to your computer and use it in GitHub Desktop.
Save calosth/13f732b594878602d71c to your computer and use it in GitHub Desktop.
A Pen by Carlos Linares.
.aplicacion-cargando .barra-carga
{
display: block;
-webkit-animation: shift-rightwards 4s ease-in-out infinite;
-moz-animation: shift-rightwards 4s ease-in-out infinite;
-ms-animation: shift-rightwards 4s ease-in-out infinite;
-o-animation: shift-rightwards 4s ease-in-out infinite;
animation: shift-rightwards 4s ease-in-out infinite;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
-o-animation-delay: .4s;
animation-delay: .4s;
}
.barra-carga
{
position: fixed;
display: none;
top: 72px;
left: 0;
right: 0;
height: 2.4px;
z-index: 800;
background: @color4;
box-shadow: 0px 0px 7px rgba(35,31,32,0.6);
-moz-box-shadow: 0px 0px 7px rgba(35,31,32,0.6);
-webkit-box-shadow: 0px 0px 7px rgba(35,31,32,0.6);
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
@-webkit-keyframes shift-rightwards
{
0%
{
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
-o-transform:translateX(-100%);
transform:translateX(-100%);
}
40%
{
-webkit-transform:translateX(0%);
-moz-transform:translateX(0%);
-o-transform:translateX(0%);
transform:translateX(0%);
}
60%
{
-webkit-transform:translateX(0%);
-moz-transform:translateX(0%);
-o-transform:translateX(0%);
transform:translateX(0%);
}
100%
{
-webkit-transform:translateX(100%);
-moz-transform:translateX(100%);
-o-transform:translateX(100%);
transform:translateX(100%);
}
}
@-moz-keyframes shift-rightwards
{
0%
{
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
-o-transform:translateX(-100%);
transform:translateX(-100%);
}
40%
{
-webkit-transform:translateX(0%);
-moz-transform:translateX(0%);
-o-transform:translateX(0%);
transform:translateX(0%);
}
60%
{
-webkit-transform:translateX(0%);
-moz-transform:translateX(0%);
-o-transform:translateX(0%);
transform:translateX(0%);
}
100%
{
-webkit-transform:translateX(100%);
-moz-transform:translateX(100%);
-o-transform:translateX(100%);
transform:translateX(100%);
}
}
@-o-keyframes shift-rightwards
{
0%
{
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
-o-transform:translateX(-100%);
transform:translateX(-100%);
}
40%
{
-webkit-transform:translateX(0%);
-moz-transform:translateX(0%);
-o-transform:translateX(0%);
transform:translateX(0%);
}
60%
{
-webkit-transform:translateX(0%);
-moz-transform:translateX(0%);
-o-transform:translateX(0%);
transform:translateX(0%);
}
100%
{
-webkit-transform:translateX(100%);
-moz-transform:translateX(100%);
-o-transform:translateX(100%);
transform:translateX(100%);
}
}
@keyframes shift-rightwards
{
0%
{
-webkit-transform:translateX(-100%);
-moz-transform:translateX(-100%);
-o-transform:translateX(-100%);
transform:translateX(-100%);
}
40%
{
-webkit-transform:translateX(0%);
-moz-transform:translateX(0%);
-o-transform:translateX(0%);
transform:translateX(0%);
}
60%
{
-webkit-transform:translateX(0%);
-moz-transform:translateX(0%);
-o-transform:translateX(0%);
transform:translateX(0%);
}
100%
{
-webkit-transform:translateX(100%);
-moz-transform:translateX(100%);
-o-transform:translateX(100%);
transform:translateX(100%);
}
}
/*---------------- Loading bar OFF ---------------- */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment