svg+css实现6种圆点圈圈loading加载动画效果代码
代码语言：html
所属分类：加载滚动
代码描述：svg+css实现6种圆点圈圈loading加载动画效果代码
代码标签： svg css 圆点 圈圈 loading 加载 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),90%,90%);
--fg: hsl(var(--hue),90%,10%);
--trans-dur: 0.3s;
font-size: calc(14px + (30 - 14) * (100vw - 280px) / (3840 - 280));
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
font: 1em/1.5 sans-serif;
height: 100vh;
transition: background-color var(--trans-dur), color var(--trans-dur);
}
main {
display: grid;
grid-gap: 3em;
margin: auto;
padding: 1.5em 0;
}
.pl {
display: block;
margin: auto;
width: 8em;
height: 8em;
}
.pl__layer {
stroke: hsl(var(--hue), 90%, 50%);
}
.pl__layer + .pl__layer {
stroke: #f20d4e;
}
.pl--4 .pl__layer, .pl--5 .pl__layer, .pl--6 .pl__layer {
stroke: #f2b10d;
}
.pl--4 .pl__layer + .pl__layer, .pl--5 .pl__layer + .pl__layer, .pl--6 .pl__layer + .pl__layer {
stroke: #0df2b1;
}
.pl__ring, .pl__ring-move {
animation-duration: 1.25s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
transition: fill var(--trans-dur);
}
.pl--1 .pl__ring {
animation-name: ring1-1;
animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
transform-origin: 7.75px 12px;
}
.pl--1 .pl__ring:nth-child(2) {
animation-name: ring1-2;
}
.pl--1 .pl__ring:nth-child(n+3) {
animation-name: ring1-3;
transform-origin: 16.25px 12px;
}
.pl--1 .pl__ring:nth-child(4) {
animation-name: ring1-4;
}
.pl--2 .pl__ring {
animation-name: ring2;
}
.pl--3 .pl__ring {
animation-name: ring3-1;
}
.pl--3 .pl__ring:nth-child(2) {
animation-name: ring3-2;
}
.pl--3 .pl__ring:nth-child(3) {
animation-name: ring3-3;
}
.pl--4 .pl__ring, .pl--4 .pl__ring-move {
animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
}
.pl--4 .pl__ring {
animation-name: ring4-4;
}
.pl--4 .pl__ring-move {
animation-name: ring4-1;
}
.pl--4 .pl__ring-move:nth-child(2) {
animation-name: ring4-2;
}
.pl--4 .pl__ring-move:nth-child(3) {
animation-name: ring4-3;
}
.pl--4 .pl__ring-move:nth-child(2) .pl__ring {
animation-name: ring4-5;
}
.pl--4 .pl__ring-move:nth-child(3) .pl__ring {
animation-name: ring4-6;
}
.pl--5 .pl__ring {
animation-name: ring5;
}
.pl--6 .pl__ring {
animation-name: ring6-1;
}
.pl--6 .pl__ring:nth-child(2) {
animation-name: ring6-2;
}
.pl--6 .pl__ring:nth-child(3) {
animation-name: ring6-3;
}
.pl--2 g:nth-child(2) > .pl__ring, .pl--5 g:nth-child(2) > .pl__ring {
animation-delay: -0.15625s;
}
.pl--2 g:nth-child(3) > .pl__ring, .pl--5 g:nth-child(3) > .pl__ring {
animation-delay: -0.3125s;
}
.pl--2 g:nth-child(4) > .pl__ring, .pl--5 g:nth-child(4) > .pl__ring {
animation-delay: -0.46875s;
}
.pl--2 g:nth-child(5) > .pl__ring, .pl--5 g:nth-child(5) > .pl__ring {
animation-delay: -0.625s;
}
.pl--2 g:nth-child(6) > .pl__ring, .pl--5 g:nth-child(6) > .pl__ring {
animation-delay: -0.78125s;
}
.pl--2 g:nth-child(7) > .pl__ring, .pl--5 g:nth-child(7) > .pl__ring {
animation-delay: -0.9375s;
}
.pl--2 g:nth-child(8) > .pl__ring, .pl--5 g:nth-child(8) > .pl__ring {
animation-delay: -1.09375s;
}
/* Beyond mobile */
@media (min-width: 375px) {
main {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
main {
grid-template-columns: repeat(3, 1fr);
}
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),90%,10%);
--fg: hsl(var(--hue),90%,90%);
}
}
/* Animations */
@keyframes ring1-1 {
from {
transform: rotate(90deg) translate(0, 4.25px);
visibility: visible;
}
50%, to {
transform: rotate(-90deg) translate(0, 4.25px);
visibility: hidden;
}
}
@keyframes ring1-2 {
from {
transform: rotate(-90deg) translate(0, 4.25px);
}
50%, to {
transform: rotate(-270deg) translate(0, 4.25px);
}
}
@keyframes ring1-3 {
from, 50% {
transform: rotate(90deg) translate(0, 4.25px);
visibility: hidden;
}
to {
transform: rotate(270deg) translate(0, 4.25px);
visibility: visible;
}
}
@keyframes ring1-4 {
from, 50% {
transform: rotate(-90deg) translate(0, 4.25px);
}
to {
transform: rotate(90deg) translate(0, 4.25px);
}
}
@keyframes ring2 {
from, to {
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
transform: scale(1);
}
10% {
animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
transform: scale(1.1);
}
55% {
animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
transform: scale(0);
}
}
@keyframes ring3-1 {
from {
transform: rotate(-90deg) translate(0, 5.5px);
}
45% {
transform: rotate(135deg) translate(0, 5.5px);
}
60% {
transform: rotate(67.5deg) translate(0, 5.5px);
}
75% {
transform: rotate(105deg) translate(0, 5.5px);
}
90%, to {
transform: rotate(90deg) translate(0, 5.5px);
}
}
@keyframes ring3-2 {
from {
transform: rotate(90deg) translate(0, 5.5px);
}
45% {
transform: rotate(315deg) translate(0, 5.5px);
}
60% {
transform: rotate(247.5deg) translate(0, 5.5px);
}
75% {
transform: rotate(285deg) translate(0, 5.5px);
}
90%, to {
transform: rotate(270deg) translate(0, 5.5px);
}
}
@keyframes ring4-1 {
from {
transform: translate(0, 0);
}
75%, to {
transform: translate(8.5px, 0);
}
}
@keyframes ring4-2 {
from, 10% {
transform: translate(0, 0);
}
85%, to {
transform: translate(8.5px, 0);
}
}
@keyframes ring4-3 {
from {
transform: translate(0, 0);
}
75%, to {
transform: translate(-17px, 0);
}
}
@keyframes ring4-4 {
from {
transform: translate(0, 0);
}
50% {
transform: translate(0, -4px);
}
75% {
transform: translate(0, 1px);
}
to {
transform: translate(0, 0);
}
}
@keyframes ring4-5 {
from, 10% {
transform: translate(0, 0);
}
60% {
transform: translate(0, -4px);
}
85% {
transform: translate(0, 1px);
}
to {
transform: translate(0, 0);
}
}
@keyframes ring4-6 {
from {
transform: translate(0, 0);
}
50% {
transform: translate(0, 9px);
}
75% {
transform: translate(0, -1px);
}
to {
transform: translate(0, 0);
}
}
@keyframes ring5 {
from, to {
animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
transform: scale(0.25);
}
50% {
animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
transform: scale(1);
}
}
@keyframes ring6-1 {
from {
animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
transform: translate(-5.5px, 0);
}
50% {
animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
transform: translate(0, 0) scale(0.5);
}
to {
transform: translate(5.5px, 0);
}
}
@keyframes ring6-2 {
from {
animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
transform: translate(5.5px, 0);
}
50% {
animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
transform: translate(0, 0) scale(1.5);
}
to {
transform: translate(-5.5px, 0);
}
}
</style>
</head>
<body translate="no">
<main>
<svg class="pl pl--1" viewBox="0 0 24 24" width="24px" height="24px">
<defs>
<linearGradient id="pl-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#000" />
<stop offset="100%" stop-color="#fff" />
</linearGradient>
<mask id="pl-mask">
<rect x="0" y="0" width="24" height="24" fill="url(#pl-grad)" />
</mask>
</defs>
<g class="pl__layer">
<g fill="none" stroke-width="1">
<circle class="pl__ring" r="2.5" cx="7.75" cy="12" />
<circle class="pl__ring" r="2.5" cx="7.75" cy="12" />
<circle class="pl__ring" r="2.5" cx="16.25" cy="12" />
<circle class="pl__ring" r="2.5" cx="16.25" cy="12" />
</g>
</g>
<g class="pl__layer" mask="url(#pl-mask)">
<g fill="none" stroke-width="1">
<circle class="pl__ring" r="2.5" cx="7.75" cy="12" />
<circle class="pl__ring" r="2.5" cx="7.75" cy="12" />
<circle class="pl__ring" r="2.5" cx="16.25" cy="12" />
<circle class="pl__ring" r="2.5" cx="16.25" cy="12&qu.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0