body{
  background: #333;
}

.scanner-content {
  position: relative;
  margin-top: 32px;
  max-width: 300px;
  margin: 32px auto;
}

.scanner-content .qr-preview > div {
  background-color: var(--bg-color);
  width: 250px;
  height: 250px;
  border-radius: 4px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.scanner-content .qr-preview video {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.scanner-content .qr-preview:after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='213' height='219' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.3' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M1 181V218H38M212 181V218H175M1 38V1H38M212 38V1H175'/%3E%3C/g%3E%3C/svg%3E");
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 9;
}

.scanner-bar {
  -webkit-animation: scan 2s linear alternate infinite;
          animation: scan 2s linear alternate infinite;
  background-color: #fff;
  top: 0;
  box-shadow: 0 0 15px #fff;
  height: 2px;
  position: absolute;
  width: 100%;
  z-index: 99;
}

@-webkit-keyframes scan {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

@keyframes scan {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}