Loading animation of arc and slice-Tornado and arc slice
0. Static
1. Code for drawing radians
width: 3em;height: 3em;border: 7px transparent solid;border-left: 7px #4DB6AC solid;border-radius: 50%;
* Another method is provided.
border-left:7px #4DB6AC solid;border-radius: 50%;border-top:7px transparent solid;border-bottom:7px transparent solid;
The latter is not as good as the former, and the naked eye can feel the difference, in chrome49.
2. Sector-based code
border: 7px transparent solid;border-left: 7px #4DB6AC solid;border-radius: 50%;
* Width and length cannot be defined for the slice. The rest are the same as the arc.
3. less encapsulate code for drawing arcs and slices
. Arc (@ direction, @ style) {@ color :~ '"@ {Style}". split (/, \ s +/) [1]'; @ width :~ '"@ {Style}". split (/, \ s +/) [0]. replace ("[", "")'; @ shape :~ '"@ {Style }". split (/, \ s +/) [2]. replace ("]", "") '; border: @ width transparent @ shape; @ length: length (@ direction );. setStyle (@ length, @ style, @ direction); border-radius: 50% ;. setStyle (@ length, @ style, @ direction) when (@ length> 0) {@ index: @ length-1; @ pos: extract (@ direction, @ length ); border-@ {pos}: @ style ;. setStyle (@ index, @ style, @ direction) ;}// usage: @ driection one or more @ styles in top, left, right, and bottom must follow the sequence of 7px solid red. arc (left, 7px solid red );. arc (left top, 7px solid red );View Code
4. complete code for loading animations
<!DOCTYPE html>View Code5. Statement
The case code is what I saw on the Internet. I did it myself, but it is not as good as the former in both effects and methods.
I am glad that I can understand the principle, but I still need to practice the details.
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
