How to write arc and sector loading animation?-H5 Tutorial-php.cn

How to write arc and sector loading animation?

PHP中文网

Release： 2017-06-21 10:28:01

Original

1762 people have browsed it

0. Static renderings

##1. Code for drawing arcs

width: 3em;
height: 3em;
border: 7px transparent solid;
border-left: 7px #4DB6AC solid;
border-radius: 50%;

Copy after login

* Here is another way

border-left:7px #4DB6AC solid;	
border-radius: 50%;
border-top:7px transparent solid;
border-bottom:7px transparent solid;

Copy after login

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%;

Copy after login

* 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);

Copy after login

View Code

4. Complete code for loading animation

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> 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;}
        </style></head><body><div class="container"><div class="canvas"><div class="spinner4"></div></div><div class="canvas"><div class="spinner5"></div></div></div></body></html>

Copy after login

View Code

5. Statement

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!