在页面上使用js和css制作的接口心跳监控功能

我最近写了一个接口查询的小工具，但无法明显的知道接口是否已经打开，以及联通是否良好，于是在查询页面上增加了一个心跳标志，用于显示接口是否能正常访问，具体实现如下。

js制作的一个接口心跳监控标志：

 

 样式代码如下：

<style>
            .heart{
                position: relative;
                width: 10px;
                height: 10px;
                background-color: tomato;
                transform: rotate(-45deg);
                margin: 10px;
            }
            .heartBefore{
                content: "";
                position: absolute;
                top: -1px;
                left: 0;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: tomato;
                margin: 10px;
            }
            .heartAfter{
                content: "";
                position: absolute;
                top: -1px;
                left: 8px;
                width: 10px;
                height: 10px;
                background-color: tomato;
                border-radius: 50%;
                margin: 10px;
            }
        </style>

js代码如下：

<script>
            let host = 'http://localhost:8888';

            $(function(){
                breathe();
            })

        
            function breathe(){
                $('.heart').css('background-color','#A8A8A8');
                $('.heartBefore').css('background-color','#A8A8A8');
                $('.heartAfter').css('background-color','#A8A8A8');
                $.ajax({
                    url: host + '/live',
                    method:'get',
                    success:(data)=>{
                        setTimeout(() => {
                            $('.heart').css('background-color','tomato');
                            $('.heartBefore').css('background-color','tomato');
                            $('.heartAfter').css('background-color','tomato');
                        }, 500);
                    },
                })
                setTimeout(() => {
                    breathe();
                }, 4000);
            }

            
        </script>

页面加载成功后调一次breathe()方法即可。

后台go接口代码：