css 如何实现一个简单的loading图标呢?


摘要:
下文讲述使用css样式代码生成一个loading图标的示例分享,如下所示:

实现思路:
    通过计算字符串拼接完成的时间戳减去字符串拼接开始的时间戳

例:

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .divTest {
            width:88px;
            height:88px;
            position: fixed; 
            margin-left:12px;
        }

        .cssLoad {
            width: 70px;
            height: 70px;
            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-dongHua 575ms infinite linear;
            -o-animation: cssload-dongHua 575ms infinite linear;
            -ms-animation: cssload-dongHua 575ms infinite linear;
            -webkit-animation: cssload-dongHua 575ms infinite linear;
            -moz-animation: cssload-dongHua 575ms infinite linear;
        }
 
        @keyframes cssload-dongHua {
            100% {
                transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

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

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

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

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

</head>
<body>
<p>
 maomao365.com <br />
 css实现一个转动的等待框
</p>
<hr />
    <div class="divTest">
        <div class="cssLoad"></div>
    </div>
   
</body>
</html>
css实现一个loading等待图标的示例分享

css实现一个loading等待图标的示例分享