为了账号安全,请及时绑定邮箱和手机立即绑定

一个简单实用的css loading图标

标签:
Html/CSS

摘要

在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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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();
        };
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消