To make this kind of loading, we can use only one label and then use Box-shadow to make a loading diagram.
First, you need a label:
<div class= "Loading" ></div>
And then the CSS:
$fontSize: 30px;
$radius: 2em;
. Loading {
font-size: $fontSize;
Width:1em;
Height:1em;
border-radius:50%;
margin:100px Auto;
box-shadow:0 -2em Rgba (255, 0, 0, 1), 1.414em-1.414em Rgba (255, 0, 0, 0.875), 2EM 0 rgba (255, 0, 0, 0.75), 1.414em 1.414 Em Rgba (255, 0, 0, 0.625), 0 2em rgba (255, 0, 0, 0.5), -1.414em 1.414em rgba (255, 0, 0, 0.375), -2em 0 rgba (255, 0, 0, 0.2 5), -1.414em-1.414em Rgba (255, 0, 0, 0.125);
Units used is EM, so if you want to modify the size of the circle, only need to modify the font-size on it, if the PX, once you need to modify the size, then the units involved will have to be modified.
Key CSS is:
box-shadow:0 -2em Rgba (255, 0, 0, 1), 1.414em-1.414em Rgba (255, 0, 0, 0.875), 2EM 0 rgba (255, 0, 0, 0.75), 1.414em 1.414 Em Rgba (255, 0, 0, 0.625), 0 2em rgba (255, 0, 0, 0.5), -1.414em 1.414em rgba (255, 0, 0, 0.375), -2em 0 rgba (255, 0, 0, 0.2 5), -1.414em-1.414em Rgba (255, 0, 0, 0.125);
Need to use multiple shadows, each shadow is a circle. It takes trigonometric functions to set their coordinates. First set a radius (such as 2EM), and then 360 degrees on the average divided into 8, each is 45 degrees, the use of trigonometric functions can calculate the offset position of the shadow. There is also the color gradient of the circle, is to set their different transparency.
The above is static, and it needs to be moved:
$fontSize: 30px; $radius: 2em; loading { font-size: $fontSize width: 1em;
height: 1em;
border-radius: 50%;
margin: 100px auto; box-shadow: 0 -2em rgba (255, 0, 0, 1), 1.414em -1.414em rgba (255, 0, 0, 0.875), 2em 0 rgba (255, 0, 0, 0.75), 1.414em 1.414em rgba (255, 0, 0, 0.625), 0 2em rgba (255, 0, 0 , 0.5), -1.414em 1.414em rgba (255, 0, 0, 0.375), -2em 0 rgba
(255, 0, 0, 0.25), -1.414em -1.414em rgba (255, 0, 0, 0.125);
animation: rotate 1s infinite forwards steps (8, end); } @keyframes rotate { 100% { transform : rotate (360DEG); &NBSP;&NBSP;&NBSP}}
Steps () This function allows the animation to be step-by-step, not coherent.
Well, that's all the code, very little. The above Box-shadow actually I was the hand calculate, originally I wanted to use sass for the loop computation, the result did not succeed. Hope the master can enlighten.
Add the CSS3 property Box-shadow use Tutorial
The CSS3 Box-shadow property allows us to easily implement a layer shadow effect. Let's take a look at this attribute in actual combat.
1. Browser compatibility for Box-shadow properties
Let's look at a browser compatibility for this property:
Opera: I do not know from which version of the support, I sent this article test, just updated opera to the latest version 10.53, has supported the Box-shadow attribute.
Firefox is supported by private properties-moz-box-shadow.
Safari and Chrome are supported by private properties-webkit-box-shadow.
All IE is not supported (do not know if IE9 has improved). Don't worry, we will introduce some hack for IE at the end of this article.
2. Syntax for Box-shadow properties
Box-shadow has six configurable values:
Img{box-shadow: Shadow type X-axis displacement y-axis displacement shadow size shadow extended shadow color}
When no shadow type is set, the default is the projection effect. When set to inset, it is an inner shadow effect.
The x-axis and y-axis displacements are not equal but similar to the "angle" and "position" inside Photoshop.
Shadow size, expansion, color, and Photoshop are all the same.
3. Example Analysis
Let's look at a box-shadow effect with a few examples, and start with a simple HTML test:
<style type= "Text/css" >css part is written here </style>
<body>
</body>
Please note: In order to save things, the following CSS code only wrote Box-shadow, in the actual use, you should-moz-box-shadow and-webkit-shadow also write. What you need to do is simplify, copy two Box-shadow, add-moz-and-webkit-in front of them respectively.
IMG {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}
(1). Projection, no displacement, 10px shadow size, no expansion, color #06c
img{box-shadow:0 0 10px #06C;}
The color value here is the hex value, we can also use the RGBA value, the advantage of RGBA value is that it has an alpha transparent value, you can control the transparency of the shadow.
img{box-shadow:0 0 10px rgba (0, 255, 0,. 5)}
(2). Add a 20px extension to the above base
img{box-shadow:0 0 10px 20px #06C;}
(3). Inner Shadow, no displacement, 10px size, no expansion, color #06c
Img{box-shadow:inset 0 0 10px #06C;}
(4). Multiple Shadow Effects
Box-shadow can be used several times, we have a four-color shadow.
img{box-shadow:-10px 0 10px Red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px Green}
(5). Order problems using multiple shadow properties
When you use more than one shadow property for the same element, you need to be aware of its order, and the first-written shadow will appear at the top level. For example, the following code, we first write a 10px green shadow, and then write a 10px size but extend the shadow of 20px. The result: the green shading layer is above the yellow shading layer.
img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px Yellow}
But if we turn the order, like this:
img{box-shadow:0 0 10px 20px yellow,box-shadow:0 0 10px Green;}
We will not see the green shadow layer after writing, because it is written first and the larger radius of the yellow layer is covered.
4. Let IE also support Box-shadow
IE itself is shadow filter can achieve similar effects, and some JS and. HTC hack files can help you achieve this effect in IE. I can't try it all, just the one I used.
IE-CSS3.HTC is an HTC file that allows IE browsers to support some of the CSS3 properties, not just Box-shadow, but also allows your IE browser to support fillet attributes Border-radius and Text Shadow properties Text-shadow.
The way it's used is to download it and put it in your server directory.
Write the following code in your
<!--[if ie]>
<style type= "text/css" >
img, #testdiv,. Testbox{behavior:url (http:// YOURDOMAIN.COM/JS/IE-CSS3.HTC);}
</style>
<![ Endif]-->The
Blue section enters the selector to use the Box-shadow property, and the green part enters the absolute path of the IE-CSS3.HTC, or relative path, which is guaranteed to be accessible anyway.
and that's OK. However, there are a few points to note:
When you use this HTC file, your CSS, as long as you write a Box-shadow,- Any one of the Moz-box-shadow or-webkit-box-shadow, IE will render.
When you use this HTC file, you can't write box-shadow:0 0 10px red; it should be box-shadow:0px 0px 10px red; otherwise, IE will fail.
does not support alpha transparency in RGBA values.
does not support inset shadows.
does not support shadow extensions.
Shadow will only appear black in IE, no matter what color you set it to.
So, the script simply allows IE to support some of the Box-shadow values.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
