Pure CSS to create busy cursor_html/css_WEB-ITnose-HTML Tutorial-php.cn

Pure CSS to create busy cursor_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:02:11

Original

1256 people have browsed it

We often use busy waiting situations, such as ajax waiting for a callback, or when loading a page, our usual approach is to put a loading.gif image and rotate it there.

I used to use it on PC, and I didn’t think it was inappropriate. Now that I want to use it on mobile, the problem arises. In the past, making the front end and compatible with various browsers was enough to give people a headache. Now it also needs to be compatible with various screen sizes.

To start, I made N gif pictures of different sizes. Use javascript to determine the screen size, and then select the appropriate gif image. The shortcomings of this are very obvious, and it would make you cry if you talk about it too much. What I have to do now is to replace

with css3 to achieve this effect. See the rendering below:

If you are interested, you can copy the source code below:

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=3">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <style type="text/css">        body {            margin: 0;            padding: 0;        }/* for busy */#busyIcon {    z-index:99999;    position:absolute;    top:0;left:0;    width:100%;    height:100%;    background-color: rgba(0,0,0,0.7);}.container {    width:100px;    height: 100px;    background-color:black;    opacity: 0.8;    margin-top: -50px;    margin-left: -50px;    position: absolute;    top:50%;left:50%;    -webkit-border-radius: 10%;}.top,.base {    height: 30%;}.spinner {    height: 40%;    width: 40%;    position: relative;    margin: 0 auto;}.spinner div {  width: 12%;  height: 26%;  background-color: white;  position: absolute;  left: 44.5%;  top: 37%;  opacity: 0;  -webkit-border-radius: 30%;  -webkit-animation: fade 1s linear infinite;}.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}    .spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}@-webkit-keyframes fade {  from {opacity: 1;}  to {opacity: 0.25;}}/*End busy*/    </style></head><body><div id="busyIcon">    <div class="container">        <div class="top"></div>        <div class="spinner">            <div class="bar1"></div>            <div class="bar2"></div>            <div class="bar3"></div>            <div class="bar4"></div>            <div class="bar5"></div>            <div class="bar6"></div>            <div class="bar7"></div>            <div class="bar8"></div>            <div class="bar9"></div>            <div class="bar10"></div>            <div class="bar11"></div>            <div class="bar12"></div>        </div>        <div class="base"></div>    </div></div></body></html>

Copy after login

This is for convenience of demonstration, for browsing The compatibility of the browser is omitted. In the actual project, I used js to encapsulate it to facilitate calling and control.

This example only records the principle, and the encapsulated code will not be posted. Below is a screenshot of the effect in the application.

There is a lot more that css3 can do, and I will share it slowly in the future.