loading.css 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. /**
  2. * @name loading.css
  3. * @author Tobias Reich
  4. * @copyright 2014 by Tobias Reich
  5. */
  6. #loading {
  7. position: fixed;
  8. width: 100%;
  9. height: 3px;
  10. background-size: 100px 3px;
  11. background-repeat: repeat-x;
  12. border-bottom: 1px solid rgba(0,0,0,.3);
  13. display: none;
  14. /* Animation */
  15. -webkit-animation-name: moveBackground;
  16. -webkit-animation-duration: .3s;
  17. -webkit-animation-iteration-count: infinite;
  18. -webkit-animation-timing-function: linear;
  19. -moz-animation-name: moveBackground;
  20. -moz-animation-duration: .3s;
  21. -moz-animation-iteration-count: infinite;
  22. -moz-animation-timing-function: linear;
  23. animation-name: moveBackground;
  24. animation-duration: .3s;
  25. animation-iteration-count: infinite;
  26. animation-timing-function: linear;
  27. }
  28. /* Modes ------------------------------------------------*/
  29. #loading.loading {
  30. background-image: -webkit-linear-gradient(left, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
  31. background-image: -moz-linear-gradient(left, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
  32. background-image: linear-gradient(left right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
  33. z-index: 2;
  34. }
  35. #loading.error {
  36. background-color: #2f0d0e;
  37. background-image: -webkit-linear-gradient(left, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
  38. background-image: -moz-linear-gradient(left, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
  39. background-image: linear-gradient(left right, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
  40. z-index: 1;
  41. }
  42. /* Content ------------------------------------------------*/
  43. #loading h1 {
  44. margin: 13px;
  45. color: #ddd;
  46. font-size: 14px;
  47. font-weight: bold;
  48. text-shadow: 0px 1px 0px #000;
  49. text-transform: capitalize;
  50. }
  51. #loading h1 span {
  52. margin-left: 10px;
  53. font-weight: normal;
  54. text-transform: none;
  55. }