|
.loading1 {
width: 0;
padding: 12px;
background-image:
radial-gradient(circle at 0% 0%, transparent 40%, rgb(0,255,0) 40%, rgb(0,255,0) 70%, transparent 70%),
radial-gradient(circle at 100% 0%, transparent 40%, rgba(0,255,0,.2) 40%, rgba(0,255,0,.2) 70%, transparent 70%),
radial-gradient(circle at 100% 100%, transparent 40%, rgba(0,255,0,.2) 40%, rgba(0,255,0,.2) 70%, transparent 70%),
radial-gradient(circle at 0% 100%, transparent 40%, rgba(0,255,0,.2) 40%, rgba(0,255,0,.2) 70%, transparent 70%);
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: 100% 100%, 0 100%, 0 0, 100% 0;
-webkit-animation: loading1 linear .7s infinite;
animation: loading1 linear .7s infinite;
}
@-webkit-keyframes loading1 {
100% {-webkit-transform: rotate(360deg);}
}
@keyframes loading1 {
100% {transform: rotate(360deg);}
}
Или создать благодаря border и animation
.loading2 {
width: 15px;
height: 15px;
border: 5px solid #ccffcc; /* полупрозрачный цвет ставить не стоит, появляются ненужные линии */
border-top-color: rgb(0,255,0);
border-radius: 100%;
-webkit-animation: loading2 linear .7s infinite;
animation: loading2 linear .7s infinite;
}
@-webkit-keyframes loading2 {
100% {-webkit-transform: rotate(360deg);}
}
@keyframes loading2 {
100% {transform: rotate(360deg);}
}
Перейти обратно к новости
|