纯css实现下载进度条动画效果
代码语言：html
所属分类：表单美化
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Download Progress Bar "Only CSS"</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Saira+Semi+Condensed&display=swap");
* {
font-family: "Saira Semi Condensed", sans-serif;
transition: all 0.5s ease;
}
body {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
.container {
padding: 64px;
position: relative;
}
.btn {
background: #2f4ad0;
padding: 8px 16px;
color: #fff;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 8px 6px -6px #555;
}
.btn:hover {
letter-spacing: 2px;
box-shadow: none;
}
.btn i {
margin: 0 10px 0 0;
}
#succes, .loader {
background: #fff;
}
#succes {
width: 100%;
height: 100%;
top: 50%;
left: 50%;
display: flex;
position: absolute;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
z-index: 1;
transition: all 0.5s ease;
-webkit-transform: translate(-50%, -50%) scale(0, 0);
transform: translate(-50%, -50%) scale(0, 0);
}
#succes a {
top: 0;
right: 6px;
display: block;
position: absolute;
color: #000;
}
#succes span {
background: #2fb65a;
padding: 8px 16px;
color: #fff;
border-radius: 4px;
}
#succes span i {
margin: 0 10px 0 0;
}
.loader {
display: block;
width: 100%;
top: 0;
left: 0;
height: 100%;
position: absolute;
z-index: 1;
visibility: hidden;
}
.loader:before {
content: "";
display: flex;
width: 100%;
top: 0;
left: 0;
height: 100%;
position: absolute;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
font-size: 20px;
}
.loader:after {
background: #2fb65a;
width: 0;
height: 3px;
bottom: 0;
left: 0;
display: block;
position: absolute;
content: "";
}
#succes:target {
-webkit-transform: translate(-50%, -50%) scale(1, 1);
transform: translate(-50%, -50%) scale(1, 1);
}
#succes:target .loader {
-webkit-animation: show 10s linear;
animation: show 10s linear;
}
#succes:target .loader:before {
-webkit-animation: percentage 10s linear;
animation: percentage 10s linear;
}
#succes:target .loader:after {
-webkit-animation: progress-bar 10s linear;
animation: progress-bar 10s linear;
}
@-webkit-keyframes show {
to {
visibility: visible;
}
}
@keyframes show {
to {
visibility: visible;
}
}
@-webkit-keyframes percentage {
0% {
content: "0%";
}
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 percentage {
0% {
content: "0%";
}
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: &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