<div class="container">
  <div class="dot"></div>
</div>

$background: #15191F
$color1: #CC2B4A
$color2: #20FBC9
$color3: #452cdb
$padding: 190px

=scalingMixin($scale, $color, $translateDot: 0, $opacity: 1)
  background: $color
  transform: scale($scale) translateX($translateDot)
  opacity: $opacity

=swipingMixin($color, $content, $translateNum)
  color: $color
  content: '#{$content}'
  transform: translateX($translateNum)

@import url('https://fonts.googleapis.com/css?family=Open+Sans')
body
  background: $background
  
.container
  position: absolute
  height: 300px
  width: 400px
  margin: auto
  left: 0
  right: 0
  top: 0
  bottom: 0
  display: flex
  align-items: center
  justify-content: center
    
  .dot
    height: 5px
    width: 5px
    background: $color1
    border-radius: 50%
    animation: scaling 12s
    animation-fill-mode: forwards
    
  &::before
    padding-right: $padding
    position: absolute
    top: 35%
    right: 30%
    font-size: 60px
    font-family: "Open Sans"
    color: $color1
    content: "1"
    animation: swiping 12s
    animation-fill-mode: forwards


@keyframes scaling
  8.3%
    +scalingMixin(1.3, $color2)
  
  16.6%
    +scalingMixin(1.6, $color1)
  
  24.9%
    +scalingMixin(1.9, $color2)
  
  32.2%
    +scalingMixin(2.2, $color1)
  
  41.5%
    +scalingMixin(2.5, $color2)
  
  49.8%
    +scalingMixin(2.8, $color1)
  
  58.1%
    +scalingMixin(3.1, $color2)
  
  66.4%
    +scalingMixin(3.5, $color1)
  
  74.7%
    +scalingMixin(4, $color2)
  
  83%
    +scalingMixin(10, $color3, -10px)
  
  90%
    +scalingMixin(1, $color3, 90px)
  
  100%
    +scalingMixin(1, $color3, 90px, 0)
  
  
@keyframes swiping
  8.3%
    +swipingMixin($color2, 2, $padding + 70px)    
  16.6% 
    +swipingMixin($color1, 3, 0)  
  
  24.9%
    +swipingMixin($color2, 4, $padding + 70px)  
  
  32.2%
    +swipingMixin($color1, 5, 0)  
  
  41.5%
    +swipingMixin($color2, 6, $padding + 70px)  
  
  49.8%
    +swipingMixin($color1, 7, 0)  
  
  58.1%
    +swipingMixin($color2, 8, $padding + 70px)  
  
  66.4%
    +swipingMixin($color1, 9, 0)  
  
  74.7%
    +swipingMixin($color2, 10, $padding + 70px)  
  
  74.8%
    +swipingMixin($color1, "", ($padding + 250px)/2)  
  
  80.1%
    +swipingMixin($color1, "", 90px)
  
  100%
    +swipingMixin($color3, "DONE", 190px)