_PreLoader.cshtml 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. @using WeApp.Helpers
  2. <!-- Page Loader -->
  3. <style>
  4. .preloader {
  5. position: fixed;
  6. top: 0;
  7. left: 0;
  8. width: 100%;
  9. height: 100%;
  10. overflow: hidden;
  11. background: #49a9ee;
  12. z-index: 9999;
  13. transition: opacity .65s;
  14. }
  15. .cs-loader {
  16. position: absolute;
  17. top: 0;
  18. left: 0;
  19. height: 100%;
  20. width: 100%;
  21. }
  22. .cs-loader-inner {
  23. transform: translateY(-50%);
  24. top: 50%;
  25. position: absolute;
  26. width: 100%;
  27. color: #fff;
  28. text-align: center;
  29. }
  30. .cs-loader-inner label {
  31. font-size: 20px;
  32. opacity: 0;
  33. display: inline-block
  34. }
  35. .cs-loader-inner label:nth-child(6) {
  36. animation: lol 3s infinite ease-in-out
  37. }
  38. .cs-loader-inner label:nth-child(5) {
  39. animation: lol 3s .1s infinite ease-in-out
  40. }
  41. .cs-loader-inner label:nth-child(4) {
  42. animation: lol 3s .2s infinite ease-in-out
  43. }
  44. .cs-loader-inner label:nth-child(3) {
  45. animation: lol 3s .3s infinite ease-in-out
  46. }
  47. .cs-loader-inner label:nth-child(2) {
  48. animation: lol 3s .4s infinite ease-in-out;
  49. }
  50. .cs-loader-inner label:nth-child(1) {
  51. animation: lol 3s .5s infinite ease-in-out
  52. }
  53. @@keyframes lol {
  54. 0% {
  55. opacity: 0;
  56. transform: translateX(-300px)
  57. }
  58. 33% {
  59. opacity: 1;
  60. transform: translateX(0)
  61. }
  62. 66% {
  63. opacity: 1;
  64. transform: translateX(0)
  65. }
  66. 100% {
  67. opacity: 0;
  68. transform: translateX(300px)
  69. }
  70. }
  71. </style>
  72. <div class="preloader">
  73. <div class="cs-loader">
  74. <div class="cs-loader-inner">
  75. <div style="font-size: 20px;">
  76. <div>@(L("PleaseWait"))</div>
  77. </div>
  78. <label> ●</label>
  79. <label> ●</label>
  80. <label> ●</label>
  81. <label> ●</label>
  82. <label> ●</label>
  83. <label> ●</label>
  84. </div>
  85. </div>
  86. </div>
  87. <!-- /.Page Loader -->
  88. @using (Html.BeginScripts())
  89. {
  90. <!-- Page Loader -->
  91. <script>
  92. $(function () {
  93. setTimeout(function () { $('.preloader').fadeOut(600); }, 50);
  94. });
  95. </script>
  96. <!-- /.Page Loader -->
  97. }