style.mcss

.spin {
  animation-delay: .7s;
  animation-duration: 1.8s;
  animation-name: spin;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}
  @keyframes spin {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(2160deg); }
  }

.magnifier {
  display: inline-block;
  position: relative;
  border-color: lightsteelblue;
}
  .magnifier::after {
    border: 4px solid;
    border-color: inherit;
    border-radius: 2px;
    bottom: -8px;
    box-sizing: border-box;
    content: ' ';
    display: block;
    height: 18px;
    position: absolute;
    right: -3px;
    transform: rotateZ(-45deg);
    width: 8px;
  }
.magnifier-input {
  -webkit-appearance: none;
  border-radius: 50px;
  border: solid 5px;
  border-color: inherit;
  box-sizing: border-box;
  font-size: 16px;
  outline: 0;
  padding: 4px 10px;
  position: relative;
  transition: .5s ease;
  width: 36px;
}
  .magnifier-input::-webkit-input-placeholder {
    opacity: 0;
    transition: opacity .5s;
  }
    .magnifier-input:focus::-webkit-input-placeholder {
      opacity: 1;
    }