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

小鱼儿 2023-10-09 21:28 11阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

小鱼儿/ 2023年10月09日 21:28/ 0 赞/ 12 阅读

相关 css 模糊加载动画的实现

阅读目录阐述 index.html index.js index.css 阐述 JS实现的模糊加载动画效果，这个效

àì夳堔傛蜴生んèń/ 2023年10月07日 20:16/ 0 赞/ 54 阅读

相关 156.CSS波浪加载器动画效果

效果 (源码网盘地址在最后) ![6be2e9939061c980170d4a2da1ab4390.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

超、凢脫俗/ 2023年01月21日 03:29/ 0 赞/ 245 阅读

相关 5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画

目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 CSS3 box-shadow 属性 2.4 CSS3 b

素颜马尾好姑娘i/ 2022年12月31日 02:25/ 0 赞/ 283 阅读

相关 css加载中动画效果

[转载自大佬][Link 1] 效果一: ![在这里插入图片描述][88253320a6ab4a489d6b1317add231e5.png] html代码：

r囧r小猫/ 2022年09月07日 12:27/ 0 赞/ 250 阅读

相关 css实现加载动画

css实现加载动画 / Usage: <div class="sk-spinner sk-spinner-rotating-plane"></div> /

不念不忘少年蓝@/ 2022年06月01日 11:54/ 0 赞/ 357 阅读

相关 css实现动态正在加载图标

利用keyframes动画实现， .er-button-loading .er-button-style:before { content: "\f

比眉伴天荒/ 2022年04月15日 01:49/ 0 赞/ 481 阅读

相关用纯CSS实现加载中动画效果

HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut">

矫情吗；*/ 2022年03月31日 12:19/ 0 赞/ 606 阅读

相关 css3 实现正反面翻转效果动画

分享一下正反面的翻转的动画效果的实现，使用了css3的一些属性；在目前的移动端中使用还是可以的，但是pc端需要注意IE的兼容问题；下面翻转了一个<p/>元素，没有使用图

淡淡的烟草味﹌/ 2022年03月14日 08:20/ 0 赞/ 992 阅读

相关 CSS3实现的图片加载动画效果

日期：2013-7-16 来源：[GBin1.com][] ![CSS3实现的图片加载动画效果][CSS3] [在线演示 ][Link 1] 使用C

清疚/ 2022年01月06日 07:11/ 0 赞/ 345 阅读