使用CSS添加打字指示符？

Question

我正在尝试使用javascript在输入框中实现输入指示器。我找到了解决方案，但问题是解决方案中的CSS在项目中产生了错误。我不熟悉这里写的CSS格式。有谁知道如何正确格式化此CSS，以便可以将其添加到项目中？

@typing-bullet-size: 5px;
@typing-bullet-color: #000;
@typing-speed: 600ms;
@typing-bullet-delay: 150ms;

.typing {
@this: typing;

display: none;
padding: 10px;
font-size: 0;
animation: fadeInUp 200ms linear 1 both;

&__bullet {
    display: inline-block;
    width: @typing-bullet-size;
    height: @typing-bullet-size;
    border-radius: 50%;
    background-color: fade(@typing-bullet-color, 30%);
    transition: all (@typing-speed/2) linear;

    &:not(:last-child) {
        margin-right: 3px;
    }
}

/* States */
&.is-@{this}-init {
    display: inline-block;   
}

&.is-@{this}-active {
    .@{this}__bullet {
        background-color: @typing-bullet-color;
        animation: bounce @typing-speed linear infinite both;

        &:nth-child(2) {
            animation-delay: @typing-bullet-delay;
        }

        &:nth-child(3) {
            animation-delay: @typing-bullet-delay * 2;
        }
    }
}
}

HTML是，

<div class="typing">
    <span class="typing__bullet"></span>
    <span class="typing__bullet"></span>
    <span class="typing__bullet"></span>
</div>

Answer 1

这里有一个教程：https://benfrain.com/creating-a-custom-input-cursorcaret/。或者，您可以从该库中获得其他一些提示：https://github.com/ichord/Caret.js