Cacher is the code snippet organizer for pro developers

div.scroll-down
  div.scroll-down-text  Scroll Down
  div.scroll-down-bar

.scroll-down
  absolute right bottom left
  height 100px
  text-align center
  z-index 1

.scroll-down-text
  font-weight bold

.scroll-down-bar
  absolute right bottom left
  background #333
  display inline-block
  margin 0 auto
  size 2px 70px

  &::before
    absolute top 10px
    animation scrollBall 1.2s ease-in-out infinite
    background #00bbdd
    border-radius 50%
    content ''
    display block
    left calc(50% - 5px)
    size 10px

@keyframes scrollBall
  40%, 60%
    transform translateY(40px)

<link href="https://codepen.io/futemma/pen/REpRLV" rel="stylesheet" />