CSS3实现的正在加载动画效果

最新推荐文章于 2024-04-23 16:06:33 发布

风老魔

最新推荐文章于 2024-04-23 16:06:33 发布

阅读量474

点赞数

分类专栏： Web 文章标签： css3 css 动画

本文链接：https://blog.csdn.net/hj1993/article/details/130496586

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #ccc;
            border-top-color: #ff6a00;
            border-radius: 50%;
            animation: spin 1s infinite linear;
        }

        .text {
            margin-top: 10px;
            font-size: 16px;
            color: #666;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="loading" style="display:block">
    <div class="spinner"></div>
    <div class="text">Loading...</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    // 加载动画    
    function showLoading() {
        var loading = document.querySelector('.loading');
        loading.style.display = 'flex';
    }

    // 关闭/隐藏动画
    function hideLoading() {
      var loading = document.querySelector('.loading');
      loading.style.display = 'none';
    }

</script>
</body>
</html>