如何在我的通知中添加一个进度条动画?

我想请某人帮我在下面的带颜色的进度条中放置一个动画效果,以时间变慢的方式在变量计时器上,有人可以帮忙吗?谢谢!

https://forum.cfx.re/uploads/default/original/4X/2/6/d/26d360320bb48dca214037102e2188ddeb7a129d.png

$(document).ready(function(){
    window.addEventListener("message",function(event){
        var html = "<div id='"+event.data.css+"'>"+event["data"]["mensagem"]+"</div>"
        $(html).fadeIn(500).appendTo("#notifications").delay(event["data"]["timer"]).fadeOut(500);
    })
});
#sucesso {
    background: rgba(34,34,34,0.75) url("images/check.png") no-repeat center left 11px;
    border-bottom: 3px solid #a3c846;
}
<html>
    <head>
        <meta charset="UTF-8">
        <title>#creative</title>
        <script src="nui://game/ui/jquery.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="notifications">
        </div>
        <script src="app.js"></script>
    </body>
</html>

原文链接 https://stackoverflow.com/questions/69988543

点赞
stackoverflow用户12087373
stackoverflow用户12087373

尝试一下这样的代码:

$(html).fadeIn(500).appendTo("#notifications")   .animate({ width: '0%' }, event["data"]["timer"]);
2021-11-16 18:30:57