59 lines
1.8 KiB
CSS
59 lines
1.8 KiB
CSS
|
/**
|
||
|
|
* @name loading.css
|
||
|
|
* @author Tobias Reich
|
||
|
|
* @copyright 2014 by Tobias Reich
|
||
|
|
*/
|
||
|
|
|
||
|
|
#loading {
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
height: 3px;
|
||
|
|
background-size: 100px 3px;
|
||
|
|
background-repeat: repeat-x;
|
||
|
|
border-bottom: 1px solid rgba(0,0,0,.3);
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
/* Animation */
|
||
|
|
-webkit-animation-name: moveBackground;
|
||
|
|
-webkit-animation-duration: .3s;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
-moz-animation-name: moveBackground;
|
||
|
|
-moz-animation-duration: .3s;
|
||
|
|
-moz-animation-iteration-count: infinite;
|
||
|
|
-moz-animation-timing-function: linear;
|
||
|
|
animation-name: moveBackground;
|
||
|
|
animation-duration: .3s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Modes ------------------------------------------------*/
|
||
|
|
#loading.loading {
|
||
|
|
background-image: -webkit-linear-gradient(left, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
|
||
|
|
background-image: -moz-linear-gradient(left, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
|
||
|
|
background-image: linear-gradient(left right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
#loading.error {
|
||
|
|
background-color: #2f0d0e;
|
||
|
|
background-image: -webkit-linear-gradient(left, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
|
||
|
|
background-image: -moz-linear-gradient(left, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
|
||
|
|
background-image: linear-gradient(left right, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Content ------------------------------------------------*/
|
||
|
|
#loading h1 {
|
||
|
|
margin: 13px;
|
||
|
|
color: #ddd;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: bold;
|
||
|
|
text-shadow: 0px 1px 0px #000;
|
||
|
|
text-transform: capitalize;
|
||
|
|
}
|
||
|
|
#loading h1 span {
|
||
|
|
margin-left: 10px;
|
||
|
|
font-weight: normal;
|
||
|
|
text-transform: none;
|
||
|
|
}
|