Advertisement
Rameen

Untitled

May 3rd, 2018
157
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.12 KB | None | 0 0
  1. 1. Use following codes in the styles.css file, which is located in the css folder.You can use it at the bottom of the file
  2.  
  3. .site_preloader{
  4. position: fixed;
  5. width: 100%;
  6. height: 100%;
  7. background-color: rgba(255, 255, 255, 0.95);
  8. z-index: 999;
  9. left: 0;
  10. top: 0;
  11. display: -webkit-box;
  12. display: -ms-flexbox;
  13. display: flex;
  14. -webkit-box-orient: vertical;
  15. -webkit-box-direction: normal;
  16. -ms-flex-direction: column;
  17. flex-direction: column;
  18. -webkit-box-pack: center;
  19. -ms-flex-pack: center;
  20. justify-content: center;
  21. }
  22.  
  23.  
  24. .loader,
  25. .loader:after {
  26. border-radius: 50%;
  27. width: 7em;
  28. height: 7em;
  29. }
  30.  
  31.  
  32. .loader {
  33. margin: 50px auto;
  34. font-size: 10px;
  35. position: relative;
  36. text-indent: -9999em;
  37. border-top: 3px solid rgba(2, 32, 47, 0.8);
  38. border-right: 3px solid rgba(2, 32, 47, 0.8);
  39. border-bottom: 3px solid rgba(2, 32, 47, 0.8);
  40. border-left: 3px solid #ffffff;
  41. -webkit-transform: translateZ(0);
  42. -ms-transform: translateZ(0);
  43. transform: translateZ(0);
  44. -webkit-animation: load8 1.1s infinite linear;
  45. animation: load8 1.1s infinite linear;
  46. }
  47. @-webkit-keyframes load8 {
  48. 0% {
  49. -webkit-transform: rotate(0deg);
  50. transform: rotate(0deg);
  51. }
  52. 100% {
  53. -webkit-transform: rotate(360deg);
  54. transform: rotate(360deg);
  55. }
  56. }
  57. @keyframes load8 {
  58. 0% {
  59. -webkit-transform: rotate(0deg);
  60. transform: rotate(0deg);
  61. }
  62. 100% {
  63. -webkit-transform: rotate(360deg);
  64. transform: rotate(360deg);
  65. }
  66. }
  67.  
  68.  
  69. 2.Use following codes in the custom.js file, which is located in the Js folder.Please paste the codes, within line 120 to 130.
  70.  
  71. function custom(){
  72. $('.site_preloader').fadeOut(1000, function () {
  73. $('this').remove();
  74. });
  75.  
  76. }
  77. $(document).ready(function () {
  78. custom();
  79. });
  80.  
  81.  
  82. 3. Now you need to call the preloader from every html pages.like index.html type.Please delete line from 70 to 81 in each html page, and use their the following codes.
  83.  
  84. <div class="site_preloader">
  85. <div class="loader"></div>
  86.  
  87. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement