preload.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. 
  2. .preloader {
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. width: 100%;
  7. height: 100%;
  8. overflow: hidden;
  9. background: #49a9ee;
  10. z-index: 9999;
  11. transition: opacity .65s;
  12. }
  13. .cs-loader {
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. height: 100%;
  18. width: 100%;
  19. }
  20. .cs-loader-inner {
  21. transform: translateY(-50%);
  22. top: 50%;
  23. position: absolute;
  24. width: 100%;
  25. color: #fff;
  26. text-align: center;
  27. }
  28. .cs-loader-inner label {
  29. font-size: 20px;
  30. opacity: 0;
  31. display: inline-block
  32. }
  33. .cs-loader-inner label:nth-child(6) {
  34. animation: lol 3s infinite ease-in-out
  35. }
  36. .cs-loader-inner label:nth-child(5) {
  37. animation: lol 3s .1s infinite ease-in-out
  38. }
  39. .cs-loader-inner label:nth-child(4) {
  40. animation: lol 3s .2s infinite ease-in-out
  41. }
  42. .cs-loader-inner label:nth-child(3) {
  43. animation: lol 3s .3s infinite ease-in-out
  44. }
  45. .cs-loader-inner label:nth-child(2) {
  46. animation: lol 3s .4s infinite ease-in-out;
  47. }
  48. .cs-loader-inner label:nth-child(1) {
  49. animation: lol 3s .5s infinite ease-in-out
  50. }
  51. @keyframes lol {
  52. 0% {
  53. opacity: 0;
  54. transform: translateX(-300px)
  55. }
  56. 33% {
  57. opacity: 1;
  58. transform: translateX(0)
  59. }
  60. 66% {
  61. opacity: 1;
  62. transform: translateX(0)
  63. }
  64. 100% {
  65. opacity: 0;
  66. transform: translateX(300px)
  67. }
  68. }