How can i implement a scanning bar animation?

Question

How do I add the green shadow effect that connected to the moving vertical line.

See the image for an example of what I am aiming for.

How can I implement this in CSS?

Here is the example that I have implemented

body {
  height: 100vh;
  position: relative;
}

.ocrloader p::before {
  content: '';
  display:inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #18c89b;
  position: relative;
  right: 4px;
}
.ocrloader p {
  color: #18c89b;
  position: absolute;
  bottom: -30px;
  left: 38%;
  font-size: 16px;
  font-weight: 600;
  animation: blinker 1.5s linear infinite;
  font-family: sans-serif;
  text-transform: uppercase;
}

.ocrloader {
  width: 360px;
  height: 225px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 40%;
  backface-visibility: hidden;
}

.ocrloader span {
  position: absolute;
  left: 35px;
  top: 0;
  width: 85%;
  height: 5px;
  background-color: #18c89b;
  box-shadow: 0 0 10px 1px #18c89b,
              0 0 1px 1px #18c89b;
  z-index: 1;
  transform: translateY(95px);
  animation: move 1.7s cubic-bezier(0.15,0.54,0.76,0.74);
  animation-iteration-count: infinite;
}

.ocrloader:before,
.ocrloader:after,
.ocrloader em:after,
.ocrloader em:before {
  border-color: #18c89b;
  content: "";
  position: absolute;
  width: 45px;
  height: 46px;
  border-style: solid;
  border-width: 0px;
}
.ocrloader:before {
  left: 0;
  top: 0;
  border-left-width: 5px;
  border-top-width: 5px;
  border-radius: 5px 0 0 0;
}
.ocrloader:after {
  right: 0;
  top: 0;
  border-right-width: 5px;
  border-top-width: 5px;
  border-radius: 0 5px 0 0;
}
.ocrloader em:before {
  left: 0;
  bottom: 0;
  border-left-width: 5px;
  border-bottom-width: 5px;
  border-radius: 0 0 0 5px;
}
.ocrloader em:after {
  right: 0;
  bottom: 0;
  border-right-width: 5px;
  border-bottom-width: 5px;
  border-radius: 0 0 5px 0;
}

@keyframes move {
  0%,
  100% {
    transform: translateY(190px);
  }
  50% {
    transform: translateY(0%);
  }
  75% {
    transform: translateY(160px);
  }
}

@keyframes blinker {  
  50% { opacity: 0; }
}

<div class="ocrloader">
  <p>Scanning</p>
  <em></em>
  <span></span>
</div>

Full example on CodePen

Elenore

Div with gradient background. – Selfpossession

it is about animation rather than the gradient itself and it is not gradient – Elenore

Answer 1

Here is an idea using box-shadow and clip-path

.box {
  width:200px;
  height:200px;
  margin:20px;
  outline:2px solid;
  outline-offset:10px;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:20px;
  background:#18c89b;
  box-shadow:0 0 70px 20px #18c89b;
  clip-path:inset(0);
  animation:
    x 0.5s ease-in-out infinite alternate,
    y 1s   ease-in-out infinite;
}

@keyframes x {
  to {
    transform:translateX(-100%);
    left:100%;
  }
}

@keyframes y {
   33% {
     clip-path:inset(0 0 0 -100px);    
   }
   50% {
     clip-path:inset(0 0 0 0);    
   }
   83%{
     clip-path:inset(0 -100px 0 0); 
   }
}

<div class="box">

</div>

Anderson

Answer 2

body {
  height: 100vh;
  position: relative;
}

.ocrloader p::before {
  content: '';
  display:inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #18c89b;
  position: relative;
  right: 4px;
}
.ocrloader p {
  color: #18c89b;
  position: absolute;
  bottom: -30px;
  left: 38%;
  font-size: 16px;
  font-weight: 600;
  animation: blinker 1.5s linear infinite;
  font-family: sans-serif;
  text-transform: uppercase;
}

.ocrloader {
  width: 360px;
  height: 225px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 40%;
  backface-visibility: hidden;
}

.ocrloader span {
  position: absolute;
  left: 35px;
  top: 0;
  width: 85%;
  height: 5px;
  background-color: #18c89b;
  box-shadow: 0 0 10px 1px #18c89b,
              0 0 1px 1px #18c89b;
  z-index: 1;
  transform: translateY(95px);
  animation: move 1.7s cubic-bezier(0.15,0.54,0.76,0.74);
  animation-iteration-count: infinite;
}

.ocrloader:before,
.ocrloader:after,
.ocrloader em:after,
.ocrloader em:before {
  border-color: #18c89b;
  content: "";
  position: absolute;
  width: 45px;
  height: 46px;
  border-style: solid;
  border-width: 0px;
}
.ocrloader:before {
  left: 0;
  top: 0;
  border-left-width: 5px;
  border-top-width: 5px;
  border-radius: 5px 0 0 0;
}
.ocrloader:after {
  right: 0;
  top: 0;
  border-right-width: 5px;
  border-top-width: 5px;
  border-radius: 0 5px 0 0;
}
.ocrloader em:before {
  left: 0;
  bottom: 0;
  border-left-width: 5px;
  border-bottom-width: 5px;
  border-radius: 0 0 0 5px;
}
.ocrloader em:after {
  right: 0;
  bottom: 0;
  border-right-width: 5px;
  border-bottom-width: 5px;
  border-radius: 0 0 5px 0;
}

@keyframes move {
  0%,
  100% {
    transform: translateY(190px);
  }
  50% {
    transform: translateY(0%);
  }
  75% {
    transform: translateY(160px);
  }
}

@keyframes blinker {  
  50% { opacity: 0; }
}

<div class="ocrloader">
  <p>Scanning</p>
  <em></em>
  <span></span>
</div>

Bealle

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Bornu