JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="page-wrap">
  <section class="example example--1">
    <span class="scroll-icon">
      <span class="scroll-icon__wheel-outer">
        <span class="scroll-icon__wheel-inner"></span>
      </span>
    </span>
  </section>
</div>

SCSS

// Example 1
@keyframes scroll_1 {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-0.6em); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(0.6em); }
  100% { transform: translateY(0); }
}

.example--1 {
  background: tomato;
}

.scroll-icon__wheel-outer {
  display: block;
  position: absolute;
  left: 50%;
  top: .6em;
  height: 1em;
  width: .4em;
  margin-left: -.2em;
  border-radius: .4em;
  overflow: hidden;
}

.scroll-icon__wheel-inner {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: #fff;
  animation: scroll_1 2.75s ease-in-out infinite;
}



.scroll-icon__dot {
  display: block;
  position: absolute;
  left: 50%;
  background: #fff;
  height: .5em;
  width: .5em;
  top: .6em;
  margin-left: -.25em;
  border-radius: 50%;
  transform-origin: top center;
  backface-visibility: hidden;
  animation: scroll_2 2s ease-out infinite;
}

// General icon style
.scroll-icon {
  display: block;
  position: relative;
  height: 3em;
  width: 1.5em;
  border: .25em solid #fff;
  border-radius: 1em;
}

// Page style
body {
  margin: 0;
}

.page-wrap {
  display: flex;
  height: 100vh;
}

.example {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}