daily pastebin goal
31%
SHARE
TWEET

Untitled

a guest Jan 12th, 2018 47 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [
  2. <div class="preloader">
  3.     <div class="pulse"></div>
  4. </div>
  5. ]
  6. [
  7.  
  8. $(window).on('load', function() {
  9.     $('.preloader').delay(1000).fadeOut('slow');
  10. });
  11.  
  12. ]
  13. @mixin opacity($opacity)
  14.     opacity: $opacity / 100
  15.     filter: alpha(opacity=$opacity)
  16.  
  17. .preloader
  18.     position: fixed
  19.     top: 0
  20.     left: 0
  21.     bottom: 0
  22.     right: 0
  23.     z-index: 100
  24.     background-color: $dark
  25.     .pulse
  26.         position: relative
  27.         left: 50%
  28.         top: 50vh
  29.         margin-left: -40px
  30.         margin-top: -40px
  31.         &::before, &::after
  32.             content: ''
  33.             border: 5px solid #323232
  34.             width: 80px
  35.             height: 80px
  36.             border-radius: 500px
  37.             position: absolute
  38.         &::before
  39.             animation: pulse-outer .8s ease-in infinite
  40.         &::after
  41.             animation: pulse-inner .8s linear infinite
  42.  
  43. @keyframes pulse-outer
  44.     0%
  45.         @include opacity(100)
  46.     50%
  47.         @include opacity(50)
  48.     100%
  49.         @include opacity(0)
  50. @keyframes pulse-inner
  51.     0%
  52.         @include opacity(0)
  53.         transform: scale(0)
  54.     100%
  55.         @include opacity(100)
  56.         transform: scale(1)
RAW Paste Data
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
 
Top