API tools faq
paste
Advertisement
EddieKidiw

Loading Page 1

EddieKidiw
Jul 23rd, 2017
143
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.     <style>
  5. .chromeframe {
  6.     margin: .2em 0;
  7.     background: #ccc;
  8.     color: #000;
  9.     padding: .2em 0
  10. }
  11.  
  12. p {
  13.     line-height: 1.33em;
  14.     color: #7E7E7E
  15. }
  16.  
  17. h1 {
  18.     color: #EEE
  19. }
  20.  
  21. #loader-wrapper {
  22.     position: fixed;
  23.     top: 0;
  24.     left: 0;
  25.     width: 100%;
  26.     height: 100%;
  27.     z-index: 1000
  28. }
  29.  
  30. #loader {
  31.     display: block;
  32.     position: relative;
  33.     left: 50%;
  34.     top: 50%;
  35.     width: 150px;
  36.     height: 150px;
  37.     margin: -75px 0 0 -75px;
  38.     border-radius: 50%;
  39.     border: 3px solid transparent;
  40.     border-top-color: #3498db;
  41.     -webkit-animation: spin 2s linear infinite;
  42.     animation: spin 2s linear infinite;
  43.     z-index: 1001
  44. }
  45.  
  46. #loader:before {
  47.     content: "";
  48.     position: absolute;
  49.     top: 5px;
  50.     left: 5px;
  51.     right: 5px;
  52.     bottom: 5px;
  53.     border-radius: 50%;
  54.     border: 3px solid transparent;
  55.     border-top-color: #e74c3c;
  56.     -webkit-animation: spin 3s linear infinite;
  57.     animation: spin 3s linear infinite
  58. }
  59.  
  60. #loader:after {
  61.     content: "";
  62.     position: absolute;
  63.     top: 15px;
  64.     left: 15px;
  65.     right: 15px;
  66.     bottom: 15px;
  67.     border-radius: 50%;
  68.     border: 3px solid transparent;
  69.     border-top-color: #f9c922;
  70.     -webkit-animation: spin 1.5s linear infinite;
  71.     animation: spin 1.5s linear infinite
  72. }
  73.  
  74. @-webkit-keyframes spin {
  75.     0% {
  76.         -webkit-transform: rotate(0deg);
  77.         -ms-transform: rotate(0deg);
  78.         transform: rotate(0deg)
  79.     }
  80.     100% {
  81.         -webkit-transform: rotate(360deg);
  82.         -ms-transform: rotate(360deg);
  83.         transform: rotate(360deg)
  84.     }
  85. }
  86.  
  87. @keyframes spin {
  88.     0% {
  89.         -webkit-transform: rotate(0deg);
  90.         -ms-transform: rotate(0deg);
  91.         transform: rotate(0deg)
  92.     }
  93.     100% {
  94.         -webkit-transform: rotate(360deg);
  95.         -ms-transform: rotate(360deg);
  96.         transform: rotate(360deg)
  97.     }
  98. }
  99.  
  100. #loader-wrapper .loader-section {
  101.     position: fixed;
  102.     top: 0;
  103.     width: 51%;
  104.     height: 100%;
  105.     background: #00adeb99;
  106.     z-index: 1000
  107. }
  108.  
  109. #loader-wrapper .loader-section.section-left {
  110.     left: 0
  111. }
  112.  
  113. #loader-wrapper .loader-section.section-right {
  114.     right: 0
  115. }
  116.  
  117. .loaded #loader-wrapper .loader-section.section-left {
  118.     -webkit-transform: translateX(-100%);
  119.     -ms-transform: translateX(-100%);
  120.     transform: translateX(-100%);
  121.     -webkit-transition: all 0.7s 0.3s cubic-bezier(.645, .045, .355, 1);
  122.     transition: all 0.7s 0.3s cubic-bezier(.645, .045, .355, 1)
  123. }
  124.  
  125. .loaded #loader-wrapper .loader-section.section-right {
  126.     -webkit-transform: translateX(100%);
  127.     -ms-transform: translateX(100%);
  128.     transform: translateX(100%);
  129.     -webkit-transition: all 0.7s 0.3s cubic-bezier(.645, .045, .355, 1);
  130.     transition: all 0.7s 0.3s cubic-bezier(.645, .045, .355, 1)
  131. }
  132.  
  133. .loaded #loader {
  134.     opacity: 0;
  135.     -webkit-transition: all 0.3s ease-out;
  136.     transition: all 0.3s ease-out
  137. }
  138.  
  139. .loaded #loader-wrapper {
  140.     visibility: hidden;
  141.     -webkit-transform: translateY(-100%);
  142.     -ms-transform: translateY(-100%);
  143.     transform: translateY(-100%);
  144.     -webkit-transition: all 0.3s 1s ease-out;
  145.     transition: all 0.3s 1s ease-out
  146. }
  147.  
  148. #content {
  149.     margin: 0 auto;
  150.     padding-bottom: 50px;
  151.     width: 80%;
  152.     max-width: 978px
  153. }
  154.  
  155. .ir {
  156.     background-color: transparent;
  157.     border: 0;
  158.     overflow: hidden;
  159.     *text-indent: -9999px
  160. }
  161.  
  162. .ir:before {
  163.     content: "";
  164.     display: block;
  165.     width: 0;
  166.     height: 150%
  167. }
  168.  
  169. .hidden {
  170.     display: none!important;
  171.     visibility: hidden
  172. }
  173.  
  174. .visuallyhidden {
  175.     border: 0;
  176.     clip: rect(0 0 0 0);
  177.     height: 1px;
  178.     margin: -1px;
  179.     overflow: hidden;
  180.     padding: 0;
  181.     position: absolute;
  182.     width: 1px
  183. }
  184.  
  185. .visuallyhidden.focusable:active,
  186. .visuallyhidden.focusable:focus {
  187.     clip: auto;
  188.     height: auto;
  189.     margin: 0;
  190.     overflow: visible;
  191.     position: static;
  192.     width: auto
  193. }
  194.  
  195. .invisible {
  196.     visibility: hidden
  197. }
  198.  
  199. .clearfix:before,
  200. .clearfix:after {
  201.     content: " ";
  202.     display: table
  203. }
  204.  
  205. .clearfix:after {
  206.     clear: both
  207. }
  208.  
  209. .clearfix {
  210.     *zoom: 1
  211. }
  212.  
  213. @media print,
  214. (-o-min-device-pixel-ratio:5/4),
  215. (-webkit-min-device-pixel-ratio:1.25),
  216. (min-resolution:120dpi) {}
  217.  
  218. @media print {
  219.     * {
  220.         background: transparent!important;
  221.         color: #000!important;
  222.         box-shadow: none!important;
  223.         text-shadow: none!important
  224.     }
  225.     a,
  226.     a:visited {
  227.         text-decoration: underline
  228.     }
  229.     a[href]:after {
  230.         content: " (" attr(href) ")"
  231.     }
  232.     abbr[title]:after {
  233.         content: " (" attr(title) ")"
  234.     }
  235.     .ir a:after,
  236.     a[href^="javascript:"]:after,
  237.     a[href^="#"]:after {
  238.         content: ""
  239.     }
  240.     pre,
  241.     blockquote {
  242.         border: 1px solid #999;
  243.         page-break-inside: avoid
  244.     }
  245.     thead {
  246.         display: table-header-group
  247.     }
  248.     tr,
  249.     img {
  250.         page-break-inside: avoid
  251.     }
  252.     img {
  253.         max-width: 100%!important
  254.     }
  255.     @page {
  256.         margin: .5cm
  257.     }
  258.     p,
  259.     h2,
  260.     h3 {
  261.         orphans: 3;
  262.         widows: 3
  263.     }
  264.     h2,
  265.     h3 {
  266.         page-break-after: avoid
  267.     }
  268. }
  269.         </style>
  270.  
  271.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  272.     <script>$(document).ready(function(){setTimeout(function(){$('body').addClass('loaded');$('h1').css('color','#222222')},3000);
  273.  
  274. });</script>
  275.  
  276. </head>
  277. <body >
  278.  
  279. <div id="loader-wrapper">
  280. <div id="loader"></div>
  281. <div class="loader-section section-left"></div>
  282. <div class="loader-section section-right"></div>
  283. </div>
  284.  
  285. tes
  286.  
  287.  
  288. </body>
  289. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!