loading.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  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-name: moveBackground;
  15. animation-duration: .3s;
  16. animation-iteration-count: infinite;
  17. animation-timing-function: linear;
  18. }
  19. /* Modes ------------------------------------------------*/
  20. #loading.loading {
  21. background-image: linear-gradient(to right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
  22. z-index: 2;
  23. }
  24. #loading.error {
  25. background-color: #2f0d0e;
  26. background-image: linear-gradient(to right, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
  27. z-index: 1;
  28. }
  29. /* Content ------------------------------------------------*/
  30. #loading h1 {
  31. margin: 13px 13px 0px 13px;
  32. color: #ddd;
  33. font-size: 14px;
  34. font-weight: bold;
  35. text-shadow: 0px 1px 0px #000;
  36. text-transform: capitalize;
  37. }
  38. #loading h1 span {
  39. margin-left: 10px;
  40. font-weight: normal;
  41. text-transform: none;
  42. }