动态等待转圈效果（HTML、CSS、JS）

老师、我太想进步了！

已于 2022-05-18 19:23:03 修改

阅读量2.5k

点赞数 2

分类专栏：前端小实例文章标签： css javascript html

于 2022-05-18 19:15:27 首次发布

本文链接：https://blog.csdn.net/weixin_50602185/article/details/124848925

版权

前端小实例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

点击开始检测后出现动态等待转圈效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .toast {
        display: none;
        position: fixed;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 18rem;
        height: 18rem;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0,0,0,0.2);
        border-radius: 1rem;
        color: #f0f0f0;
        font-size: 2.5rem;
    }

    .load {
        display: inline-block;
        margin-bottom: 1.5rem;
        height: 4rem;
        width: 4rem;
        border: 0.4rem solid transparent;
        border-top-color: white;
        border-left-color: white;
        border-bottom-color: white;
        animation: circle 1s infinite linear;
        -webkit-animation: circle 1s infinite linear; /* Safari 和 Chrome */
        border-radius: 50%
    }

    @-webkit-keyframes circle {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-360deg)
        }
    }
</style>
<body>
<div class="toast" id="toast">
    <span class="load"></span>
    <span>检测中...</span>
</div>
<form action="" method="post">
    <input type="button" value="开始检测" id="submit">
</form>

<script src="js/jquery-3.6.0.js"></script>
<script>
    var submit = document.getElementById("submit");
    var toast = document.getElementById("toast");
    submit.onclick = function () {
        toast.style.display = "flex";
    }

    $(function () {
        // $('.toast').css({display: 'flex'})
        //这里可以写网络请求代码...
        $.ajax({
            url: '/api/login',
            type: 'POST',
            data: {username: '111'},
            dataType: 'json',
            success: function (data) {//请求成功则关闭圈圈
                $('.toast').css({display: 'none'})
            },
            error: function (e) {
                console.log(e)
            }
        })
    });
</script>
</body>
</html>