一个简单实用的css loading图标

时间：2017-01-06 10:41:55 阅读：248 评论：0 收藏：0 [点我收藏+]

摘要

在web开发中，为了提高用户体验，在加载数据的时候都会给一个loading的提示。

Html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <style>
        .cssload-container {
            width: 24px;
            height: 24px;
            position: fixed;
            top: 260px;
            left: 50%;
            margin-left: -12px;
        }

        .cssload-speeding-wheel {
            width: 60px;
            height: 60px;
            margin: 0 auto;
            border: 2px solid rgba(0,0,0,0.25);
            border-radius: 50%;
            border-left-color: transparent;
            border-right-color: transparent;
            animation: cssload-spin 575ms infinite linear;
            -o-animation: cssload-spin 575ms infinite linear;
            -ms-animation: cssload-spin 575ms infinite linear;
            -webkit-animation: cssload-spin 575ms infinite linear;
            -moz-animation: cssload-spin 575ms infinite linear;
        }



        @keyframes cssload-spin {
            100% {
                transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-o-keyframes cssload-spin {
            100% {
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-ms-keyframes cssload-spin {
            100% {
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-webkit-keyframes cssload-spin {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @-moz-keyframes cssload-spin {
            100% {
                -moz-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>

</head>
<body>
    <div class="cssload-container">
        <div class="cssload-speeding-wheel"></div>
    </div>
    <script>
        function showLoading() {
            $(".cssload-container").show();
        };
        function hideLoading() {
            $(".cssload-container").hide();
        };
        var times = 1;
        setInterval(function () {
            if (times % 2 === 0) {
                hideLoading();
            } else {
                showLoading();
            };
            times++;
        }, 2000)
    </script>
</body>
</html>

效果

技术分享

把需要的css贴过去，然后把这段代码放在需要显示的页面上

 <div class="cssload-container">
        <div class="cssload-speeding-wheel"></div>
    </div>

控制显示与隐藏的js

   function showLoading() {
            $(".cssload-container").show();
        };
        function hideLoading() {
            $(".cssload-container").hide();
        };

一个简单实用的css loading图标

标签：orm src 开发 ide 简单 web anim alt back

原文地址：http://www.cnblogs.com/wolf-sun/p/6255216.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行