Advertisement
WILDAN_IZZUDIN

PRELOADER SCRIPT

Jan 20th, 2018
473
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.19 KB | None | 0 0
  1. <html><head>
  2. <title>Underxploit</title>
  3. <!--- Jquery 2.1.3 --->
  4. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  5.  
  6. <!--- Font Awesome 4.7.0 --->
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
  8.  
  9.  
  10. <!--- Loader Style --->
  11. <style>
  12. @import url("https://fonts.googleapis.com/css?family=Cabin");
  13. #loading-wrapper {
  14.   position: fixed;
  15.   width: 100%;
  16.   height: 100%;
  17.   left: 0;
  18.   top: 0;
  19.   background:#222;
  20.   z-index: 99999;
  21. }
  22. #loading-text {
  23.   display: block;
  24.   position: absolute;
  25.   top: 50%;
  26.   left: 50%;
  27.   color: #fff;
  28.   width: 100px;
  29.   height: 30px;
  30.   margin: -8px 0 0 -50px;
  31.   text-align: center;
  32.   font-size: 25px;
  33. }
  34. #loading-content {
  35.   display: block;
  36.   position: fixed;
  37.   left: 50%;
  38.   top: 50%;
  39.   width: 120px;
  40.   height: 120px;
  41.   margin: -55px 0 0 -60px;
  42.   border: 3px solid #F00;
  43. }
  44. #loading-content {
  45.   border: 3px solid transparent;
  46.   border-top-color: #4C8BF4;
  47.   border-bottom-color: #4C8BF4;
  48.   border-radius: 50%;
  49.   -webkit-animation: loader 500ms linear infinite;
  50.   -moz-animation: loader 500ms linear infinite;
  51.   -o-animation: loader 500ms linear infinite;
  52.   animation: loader 500ms linear infinite;
  53. }
  54. @keyframes loader {
  55.   0% {
  56.     -webkit-transform: rotate(0deg);
  57.     -ms-transform: rotate(0deg);
  58.     transform: rotate(0deg);
  59.   }
  60.   100% {
  61.     -webkit-transform: rotate(360deg);
  62.     -ms-transform: rotate(360deg);
  63.     transform: rotate(360deg);
  64.   }
  65. }
  66. </style>
  67.  
  68. <!--- Javascript Opacity --->
  69. <script>
  70. $(document).ready(function() {
  71.     function pulsate() {
  72. $("#loading-text").animate({ opacity: 0.2 }, 500, 'linear')
  73.     .animate({ opacity: 1 }, 500, 'linear', pulsate)
  74.     .click(function() {
  75. $(this).animate({ opacity: 1 }, 500, 'linear');
  76. $(this).stop();
  77.     });
  78. }
  79. pulsate();
  80. });
  81. </script>
  82.  
  83. <!--- Javascript Preloader --->
  84. <script>
  85.     $(window).load(function () {
  86.             $('#loading-wrapper').delay(1000).fadeOut('slow');
  87.          });
  88.   </script>
  89. </head><body>
  90.    
  91. <!--- Run --->
  92. <div id="loading-wrapper">
  93.   <div id="loading-text"><i class="fa fa-bug"></i></div>
  94.   <div id="loading-content"></div>
  95. </div>
  96. // Content Here
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement