Как сделать swipe button для прелоадера в Tilda

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

<style>
div#allrecords{
    padding-top:100svh;
}

div#allrecords.hide-padding{
    padding-top: 0 !important;
    transition: all 1.4s ease-in-out 0.3s;
    
}

.swiper  {
    border-radius: 100px;
    padding: 5px 5px;4px; 
    transition: all 0.3s ease-in-out;
}

.swipe-unlocker .tn-atom {
    background: none !important;
}



body.t-body {
    overflow: hidden;
}

body.t-body.overflow {
    overflow: auto;
}

.uc-swipe-block {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 999;
    transition: all 1.5s ease-in-out 0.3s;
}

.uc-swipe-block.slide-move {
    transform: translateY(-100%);
    pointer-events: none;
        
}

.swipe-unlocker .tn-atom {
    display: flex !important;
    justify-content: center;
}

.swiper.finish-mode {
    opacity: 0;
}

.swiper svg {
    position: absolute;
    top: 5px;
    left: 5px;
    overflow: visible;
}

.swiper {
    position: relative;
    width: 310px;
    height: 70px;
}

.btn-text.t-text {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -2px;
    font-size: 17px;
    color: #fff;
    font-weight: 400;
    padding-right: 10px;
}


.swiper .swipe-btn {
  cursor: pointer;
}
.swiper .swipe-btn.back-to-start {
  -webkit-transition: -webkit-transform .5s ease-in-out;
  transition: -webkit-transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
  transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
  -webkit-transform: translateX(0) !important;
          transform: translateX(0) !important;
}
.swiper .swipe-btn .circle {
  fill: #ed7000;
}
.swiper .swipe-btn .arrow {
    stroke: #000;
    stroke-width: 2px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    fill: #fff;
}

.swiper .swipe-end {
    fill-rule: evenodd;
    stroke: #ffffff;
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    fill: none;
    transform: matrix(1, 0, 0, 1, 252, -8);
}

.swiper .dotted-line circle {
  fill: #0d3d7d;
}

.unlock {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  color: #0d3d7d;
  text-align: center;
  padding: 10px;
  -webkit-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
  opacity: 0;
}

.swiper .dotted-line circle {
    fill: #fff;
}

</style>



<script>

if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}


swiperElem = `

<div class="swiper">
    <div class="btn-text t-text"></div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="310px" height="70px">
    <g id="dotted-line" class="dotted-line">
      <circle cx="40" cy="22" r="3"></circle>
      <circle cx="60" cy="22" r="3"></circle>
      <circle cx="80" cy="22" r="3"></circle>
      <circle cx="100" cy="22" r="3"></circle>
      <circle cx="120" cy="22" r="3"></circle>
      <circle cx="140" cy="22" r="3"></circle>
      <circle cx="160" cy="22" r="3"></circle>
      <circle cx="180" cy="22" r="3"></circle>
      <circle cx="200" cy="22" r="3"></circle>
      <circle cx="220" cy="22" r="3"></circle>
      <circle cx="240" cy="22" r="3"></circle>
    </g>
    
    <circle  id="swipe-end" class="swipe-end" cx="30" cy="30" r="29.5" stroke="white"/>

    <a id="swipe-btn" class="swipe-btn" xlink:href= "http://example.com/link/">
      <g>
        <path fill-rule="evenodd"  fill="#fff"
              d="M22.000,0.001 C34.150,0.001 44.000,9.850 44.000,22.000 C44.000,34.150 34.150,44.000 22.000,44.000 C9.850,44.000 0.000,34.150 0.000,22.000 C0.000,9.850 9.850,0.001 22.000,0.001 Z"/>
        
        <path id="swipe-arrow" class="arrow" fill-rule="#32b2f7"     d="M1 1L10 10L1 19" stroke="black" stroke-width="2" stroke-linecap="round"/>
              
      </g>
    </a>
  </svg>
</div>


`;


$('.swipe-unlocker .tn-atom').html(swiperElem);

let swiperDragged = false,
    startX,
    endX = 0;

function swipe(){
  let $swipe = $('.swiper'),
      $btn = $('.swipe-btn', $swipe);

   TweenLite.to('#swipe-arrow', 0, { x: 16, y: 11});
   TweenLite.to('#swipe-end', 0, { x: 260, y: 12});
  
  let tl = new TimelineMax({ repeat: -1 });
  tl.staggerFrom("#dotted-line circle", 0.7, { scale: 0.7, x: -2, y: .5, opacity: 0.7, delay:0.1, ease: Power2.easeInOut, repeat: 1, yoyo: true}, 0.15);

  $btn.on('click touchend', function(e){
    e.preventDefault();
  }).on('touchstart mousedown', function(e) {
    e.preventDefault();
    swiperDragged = true;
    startX = typeof e.pageX != 'undefined' ? e.pageX : e.originalEvent.touches[0].pageX;
    endX = 0;
  })

  $(document).on('touchmove mousemove', function(e){
    if (swiperDragged) {
      actualX = typeof e.pageX != 'undefined' ? e.pageX : e.originalEvent.touches[0].pageX;
      endX = Math.max(0, Math.min(260, actualX - startX));
      TweenLite.to('#swipe-btn', 0, { x: endX});
    }
  }).on('touchend mouseup', function(e) {
    if (swiperDragged) {
      swiperDragged = false;
      if (endX < 255) {
        TweenLite.to('#swipe-btn', .5, { x: 0 });
      } else {
        
        $('.swiper').addClass('finish-mode');
        $('.uc-swipe-block').addClass('slide-move');
        $('div#allrecords').addClass('hide-padding');
        
        $('.t-body').addClass('overflow');
        
        //window.location.href = 'http://www.google.com'; 
        TweenLite.to('#swipe-btn', .1, { x: 260});
        setTimeout(function(){
          TweenLite.to('#swipe-btn', .5, { x: 0 });
            $('.swiper').removeClass('finish-mode');
        }, 2000);
      }
      endX = 0;
    }
  });
}
swipe();

$(document).ready(function(){
    setTimeout(function(){
              $(window).scrollTop(0);
    }, 700);
});
</script>