css+svg实现炫酷下载进度动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：进度条

代码描述：css+svg实现炫酷下载进度动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @-webkit-keyframes status-animation {
	1% {
	content:"1%"
}
2% {
	content:"2%"
}
3% {
	content:"3%"
}
4% {
	content:"4%"
}
5% {
	content:"5%"
}
6% {
	content:"6%"
}
7% {
	content:"7%"
}
8% {
	content:"8%"
}
9% {
	content:"9%"
}
10% {
	content:"10%"
}
11% {
	content:"11%"
}
12% {
	content:"12%"
}
13% {
	content:"13%"
}
14% {
	content:"14%"
}
15% {
	content:"15%"
}
16% {
	content:"16%"
}
17% {
	content:"17%"
}
18% {
	content:"18%"
}
19% {
	content:"19%"
}
20% {
	content:"20%"
}
21% {
	content:"21%"
}
22% {
	content:"22%"
}
23% {
	content:"23%"
}
24% {
	content:"24%"
}
25% {
	content:"25%"
}
26% {
	content:"26%"
}
27% {
	content:"27%"
}
28% {
	content:"28%"
}
29% {
	content:"29%"
}
30% {
	content:"30%"
}
31% {
	content:"31%"
}
32% {
	content:"32%"
}
33% {
	content:"33%"
}
34% {
	content:"34%"
}
35% {
	content:"35%"
}
36% {
	content:"36%"
}
37% {
	content:"37%"
}
38% {
	content:"38%"
}
39% {
	content:"39%"
}
40% {
	content:"40%"
}
41% {
	content:"41%"
}
42% {
	content:"42%"
}
43% {
	content:"43%"
}
44% {
	content:"44%"
}
45% {
	content:"45%"
}
46% {
	content:"46%"
}
47% {
	content:"47%"
}
48% {
	content:"48%"
}
49% {
	content:"49%"
}
50% {
	content:"50%"
}
51% {
	content:"51%"
}
52% {
	content:"52%"
}
53% {
	content:"53%"
}
54% {
	content:"54%"
}
55% {
	content:"55%"
}
56% {
	content:"56%"
}
57% {
	content:"57%"
}
58% {
	content:"58%"
}
59% {
	content:"59%"
}
60% {
	content:"60%"
}
61% {
	content:"61%"
}
62% {
	content:"62%"
}
63% {
	content:"63%"
}
64% {
	content:"64%"
}
65% {
	content:"65%"
}
66% {
	content:"66%"
}
67% {
	content:"67%"
}
68% {
	content:"68%"
}
69% {
	content:"69%"
}
70% {
	content:"70%"
}
71% {
	content:"71%"
}
72% {
	content:"72%"
}
73% {
	content:"73%"
}
74% {
	content:"74%"
}
75% {
	content:"75%"
}
76% {
	content:"76%"
}
77% {
	content:"77%"
}
78% {
	content:"78%"
}
79% {
	content:"79%"
}
80% {
	content:"80%"
}
81% {
	content:"81%"
}
82% {
	content:"82%"
}
83% {
	content:"83%"
}
84% {
	content:"84%"
}
85% {
	content:"85%"
}
86% {
	content:"86%"
}
87% {
	content:"87%"
}
88% {
	content:"88%"
}
89% {
	content:"89%"
}
90% {
	content:"90%"
}
91% {
	content:"91%"
}
92% {
	content:"92%"
}
93% {
	content:"93%"
}
94% {
	content:"94%"
}
95% {
	content:"95%"
}
96% {
	content:"96%"
}
97% {
	content:"97%"
}
98% {
	content:"98%"
}
99% {
	content:"99%"
}
100% {
	content:"100%"
}
}@keyframes status-animation {
	1% {
	content:"1%"
}
2% {
	content:"2%"
}
3% {
	content:"3%"
}
4% {
	content:"4%"
}
5% {
	content:"5%"
}
6% {
	content:"6%"
}
7% {
	content:"7%"
}
8% {
	content:"8%"
}
9% {
	content:"9%"
}
10% {
	content:"10%"
}
11% {
	content:"11%"
}
12% {
	content:"12%"
}
13% {
	content:"13%"
}
14% {
	content:"14%"
}
15% {
	content:"15%"
}
16% {
	content:"16%"
}
17% {
	content:"17%"
}
18% {
	content:"18%"
}
19% {
	content:"19%"
}
20% {
	content:"20%"
}
21% {
	content:"21%"
}
22% {
	content:"22%"
}
23% {
	content:"23%"
}
24% {
	content:"24%"
}
25% {
	content:"25%"
}
26% {
	content:"26%"
}
27% {
	content:"27%"
}
28% {
	content:"28%"
}
29% {
	content:"29%"
}
30% {
	content:"30%"
}
31% {
	content:"31%"
}
32% {
	content:"32%"
}
33% {
	content:"33%"
}
34% {
	content:"34%"
}
35% {
	content:"35%"
}
36% {
	content:"36%"
}
37% {
	content:"37%"
}
38% {
	content:"38%"
}
39% {
	content:"39%"
}
40% {
	content:"40%"
}
41% {
	content:"41%"
}
42% {
	content:"42%"
}
43% {
	content:"43%"
}
44% {
	content:"44%"
}
45% {
	content:"45%"
}
46% {
	content:"46%"
}
47% {
	content:"47%"
}
48% {
	content:"48%"
}
49% {
	content:"49%"
}
50% {
	content:"50%"
}
51% {
	content:"51%"
}
52% {
	content:"52%"
}
53% {
	content:"53%"
}
54% {
	content:"54%"
}
55% {
	content:"55%"
}
56% {
	content:"56%"
}
57% {
	content:"57%"
}
58% {
	content:"58%"
}
59% {
	content:"59%"
}
60% {
	content:"60%"
}
61% {
	content:"61%"
}
62% {
	content:"62%"
}
63% {
	content:"63%"
}
64% {
	content:"64%"
}
65% {
	content:"65%"
}
66% {
	content:"66%"
}
67% {
	content:"67%"
}
68% {
	content:"68%"
}
69% {
	content:"69%"
}
70% {
	content:"70%"
}
71% {
	content:"71%"
}
72% {
	content:"72%"
}
73% {
	content:"73%"
}
74% {
	content:"74%"
}
75% {
	content:"75%"
}
76% {
	content:"76%"
}
77% {
	content:"77%"
}
78% {
	content:"78%"
}
79% {
	content:"79%"
}
80% {
	content:"80%"
}
81% {
	content:"81%"
}
82% {
	content:"82%"
}
83% {
	content:"83%"
}
84% {
	content:"84%"
}
85% {
	content:"85%"
}
86% {
	content:"86%"
}
87% {
	content:"87%"
}
88% {
	content:"88%"
}
89% {
	content:"89%"
}
90% {
	content:"90%"
}
91% {
	content:"91%"
}
92% {
	content:"92%"
}
93% {
	content:"93%"
}
94% {
	content:"94%"
}
95% {
	content:"95%"
}
96% {
	content:"96%"
}
97% {
	content:"97%"
}
98% {
	content:"98%"
}
99% {
	content:"99%"
}
100% {
	content:"100%"
}
}.dl {
	--background:#FFF;
	--primary:#1F242D;
	--border-radius:3px;
	--square-size:70px;
	--progress-color:linear-gradient(to right top,#00A7FC,#0070ED);
	display:flex;
	justify-content:space-between;
	align-items:center
}
.dl .dl-box {
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:var(--border-radius);
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,0.2)
}
.dl .dl-box .dl-button {
	width:55px;
	height:55px;
	position:relative;
	display:flex;
	justify-content:center;
	background:var(--primary);
	cursor:pointer;
	transition:width .2s ease-in .4s,height .2s ease-in .4s,background .2s ease-in .4s
}
.dl .dl-box .dl-button .arrow {
	position:absolute;
	top:20px;
	width:2px;
	height:15px;
	background:var(--background);
	border-radius:var(--border-radius);
	transition:background .2s ease-in .4s
}
.dl .dl-box .dl-button .arrow:before,.dl .dl-box .dl-button .arrow:after {
	content:"";
	display:block;
	width:2px;
	height:8px;
	background:var(--background);
	position:absolute;
	bottom:0;
	transform-origin:50% 100%;
	border-radius:var(--border-radius);
	transition:background .2s ease-in .4s
}
.dl .dl-box .dl-button .arrow:before {
	transform:rotate(-45deg) translateX(25%)
}
.dl .dl-box .dl-button .arrow:after {
	transform:rotate(45deg) translateX(-25%)
}
.dl .dl-box .dl-button .basket {
	position:absolute;
	width:40px;
	height:20px;
	bottom:20px;
	border-radius:var(--border-radius)
}
.dl .dl-box .dl-button .basket:before,.dl .dl-box .dl-button .basket:after {
	content:"";
	position:absolute;
	bottom:0;
	height:0;
	width:0;
	display:block;
	opacity:var(--opacity,0);
	transition:opacity .15s linear;
	border-bottom:sol.........完整代码请登录后点击上方下载按钮下载查看