Home>Article>Web Front-end> How to write arc and sector loading animation?
0. Static renderings
##1. Code for drawing arcs
width: 3em; height: 3em; border: 7px transparent solid; border-left: 7px #4DB6AC solid; border-radius: 50%;
* Here is another way
border-left:7px #4DB6AC solid; border-radius: 50%; border-top:7px transparent solid; border-bottom:7px transparent solid;The latter is made into a rotation The animation effect is not as good as the former, and the difference can be felt with the naked eye. In chrome49.
2. The code for drawing a fan shape
border: 7px transparent solid; border-left: 7px #4DB6AC solid; border-radius: 50%;
* The width and length cannot be defined when drawing a sector, the rest is the same as drawing an arc
##3.less encapsulates the code for drawing arcs and sectors
.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); } } //使用方式: @driection 可以是top、left、right、bottom中的一个或多个 @style 需要严格按照 7px solid red 这样的顺序 .arc(left,7px solid red); .arc(left top,7px solid red);
76c82f278ac045591c9159d381de2c579fd01892b579bba0c343404bcccd70fb93f0f5c25f18dab9d176bd4f6de5d30ea80eb7cbb6fff8b0ff70bae37074b813b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2fc9ccee2e6ea535a969eb3f532ad9fe89 html,body { overflow: hidden; width: 100%; height: 100%;}.container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: space-around; -ms-flex-pack: space-around; justify-content: space-around; margin: 0 auto; max-width: 650px; min-width: 200px;}.container .canvas { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #eee; border-radius: 50%; -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); height: 10em; width: 10em; margin: 1em 1em 2em 1em;}.container .canvas .spinner4 { width: 3em; height: 3em; border: 7px transparent solid; border-left: 7px #4DB6AC solid; border-radius: 50%; -webkit-animation: spinner4 1s linear infinite; animation: spinner4 1s linear infinite;}@-webkit-keyframes spinner4 { 100% { -webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg); }} @keyframes spinner4 { 100% { -webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg); }} .container .canvas .spinner5 { border: 1.5em transparent solid; border-right: 1.5em #4DB6AC solid; border-left: 1.5em #4DB6AC solid; border-radius: 50%; -webkit-animation: spinner5 1s linear infinite; animation: spinner5 1s linear infinite;}@-webkit-keyframes spinner5 { 0% { transform: rotate(0deg); } 50% {transform: rotate(60deg); } 100% {transform: rotate(360deg); }} @keyframes spinner5 { 0% { transform: rotate(0deg); } 50% {transform: rotate(60deg); } 100% {transform: rotate(360deg); }} .container .canvas .spinner6 { width: 1em; height: 1em; border-radius: 50%; background-color: #4db6ac; margin: 0.1em; -webkit-animation: fall 1s linear infinite; animation: fall 1s linear infinite;} 531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86da3d26fddad773596419d66c0738d6f7726729cccebeafa4ae1b3f5481cc4d8c01b2b5be7d39375e167508b99d8a071d116b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba6826729cccebeafa4ae1b3f5481cc4d8c034a400c0b5f06feade14ef21b696287316b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
The case code is what I saw on the Internet. I imitated it myself, but the effect and method are not as good as the former.
It is gratifying to know the principle, but the details still need practice.
The above is the detailed content of How to write arc and sector loading animation?. For more information, please follow other related articles on the PHP Chinese website!