Facebook
From Emerald Owl, 4 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 216
  1. $(`<style>@keyframes spinner {
  2.   100% {
  3.     transform: rotate(3600deg);
  4.   }
  5. }
  6.  
  7. .loading-container {
  8.   margin: 0 auto;
  9.   text-align: center;
  10.   position: relative;
  11.   top: 50vh;
  12.   transform: translateY(-50%);
  13. }
  14.  
  15. .spinner {
  16.   display: inline-block;
  17.   width: 300px;
  18.   height: 300px;
  19.   background: url('http://i.imgur.com/1V1UQWC.png') center center;
  20.   background-size: contain;
  21.   transition-origin: 50% 50%;
  22.   animation: spinner 3s infinite alternate ease-in-out;
  23. }
  24. .spinner-center {
  25.   display: inline-block;
  26.   position: absolute;
  27.   margin-left: -300px;
  28.   width: 300px;
  29.   height: 300px;
  30.   background: url('http://i.imgur.com/u0BC2ZR.png') center center;
  31.   background-size: contain;
  32.   content: '';
  33. }
  34.  
  35. .loading-text {
  36.   position: relative;
  37.   z-index: 1;
  38.   font-size: 1.5rem;
  39.   font-family: "Comic Sans MS", cursive, sans-serif;
  40.   margin-left: 0.5em;
  41. }
  42.  
  43. #_t1{
  44.  
  45.     margin-top: 300px !important;
  46. }
  47. #loading{
  48. background: black !important;
  49. }
  50. </style>`).appendTo("head");
  51.  
  52.  
  53.   $("#loading").prepend(`<div class="loading-container">
  54.   <div class="spinner"></div>
  55.   <div class="spinner-center"></div>
  56. </div>`);