查询进度css,css

css

@charset "UTF-8";

html {

background-image: radial-gradient(#ffffff, #006699);

height: 100vh;

}

.loading {

background-color: #eee;

border-radius: 4px;

bottom: 30vh;

box-shadow: 0 0 5vmin rgba(0, 0, 0, 0.25);

font-family: sans-serif;

left: 20vw;

padding: 5vh 5vw;

position: absolute;

right: 20vw;

top: 30vh;

}

.bar {

background-color: #ccc;

height: 3vh;

margin: 7vh 0 1vh 0;

padding: 1vh;

position: relative;

width: 100%;

}

.bar:before {

animation: barWidth 30s linear;

background-color: #0c0;

bottom: 0;

content: "";

left: 0;

position: absolute;

top: 0;

transform: scale(0.99, 1);

transform-origin: left;

width: 100%;

}

.progress:before {

animation: progressTextChange 30s linear;

content: "And, just hang here... forever";

float: left;

}

.progress:after {

animation: percentageChange 30s linear;

content: "99%";

float: right;

}

@keyframes percentageChange {

0% {

content: "0%";

}

10% {

content: "1%";

}

20% {

content: "50%";

}

30% {

content: "5%";

}

40% {

content: "95%";

}

50% {

content: "1%";

}

60% {

content: "0%";

}

70% {

content: "99%";

}

80% {

content: "10%";

}

90% {

content: "90%";

}

100% {

content: "99%";

}

}

@keyframes progressTextChange {

0% {

content: "Estimating time remaining...";

}

10% {

content: "28 minutes remaining";

}

20% {

content: "55 seconds remaining";

}

30% {

content: "40 minutes remaining";

}

40% {

content: "5 seconds remaining";

}

50% {

content: "A couple of weeks?";

}

60% {

content: "40 days and 40 nights";

}

70% {

content: "Sooooo close...";

}

80% {

content: "Ok, you've probably got time for a coffee";

}

90% {

content: "Haha, no coffee for you, sucker";

}

100% {

?: "And, just hang here... forever";

}

}

@keyframes barWidth {

0%,

9% {

transform: scale(0, 1);

}

10%,

19% {

transform: scale(0.01, 1);

}

20%,

29% {

transform: scale(0.5, 1);

}

30%,

39% {

transform: scale(0.05, 1);

}

40%,

49% {

transform: scale(0.95, 1);

}

50%,

59% {

transform: scale(0.01, 1);

}

60%,

69% {

transform: scale(0, 1);

}

70%,

79% {

transform: scale(0.99, 1);

}

80%,

89% {

transform: scale(0.1, 1);

}

90%,

99% {

transform: scale(0.9, 1);

}

100% {

transform: scale(0.99, 1);

}

}