SHARE
TWEET

Untitled

a guest Aug 18th, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @mixin opacity($opacity)
  2.     opacity: $opacity / 100
  3.     filter: alpha(opacity = $opacity)
  4.  
  5. .preloader
  6.     position: fixed
  7.     top: 0
  8.     left: 0
  9.     right: 0
  10.     bottom: 0
  11.     z-index: 100
  12.     background-color: $dark
  13.     .pulse
  14.         position: relative
  15.         left: 50%
  16.         top: 50vh
  17.         margin:
  18.             left: -40px
  19.             top: -40px
  20.         &::before, &::after
  21.             content: ''
  22.             border: 5px solid #323232
  23.             width: 80px
  24.             height: 80px
  25.             border-radius: 500px
  26.             position: absolute
  27.         &::before
  28.             animation: pulse-outer .8s ease-in infinite
  29.         &::after
  30.             animation: pulse-inner .8s ease-in infinite
  31. @keyframes pulse-outer
  32.     0%
  33.         @include opacity(100)
  34.     50%
  35.         @include opacity(50)
  36.     100%
  37.         @include opacity(0)
  38. @keyframes pulse-inner
  39.     0%
  40.         @include opacity(0)
  41.         transform: scale(0)
  42.     100%
  43.         @include opacity(100)
  44.         transform: scale(1)
  45.  
  46. $(window).on('load', function () { //при закгрузки страницы, выполним функцию:
  47.     $('.preloader').delay(1000).fadeOut('slow'); // .preloader установим задержку в 1сек. и скроем этот элемент (медленно)
  48. });
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