css3在结束时暂停,JS/CSS3 可控进度条动画（可启动/暂停/结束）

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

body {

background: #b9b0e3;

color: #fff;

font-family: Courier;

font-size: 16px;

font-weight: bold;

text-transform: uppercase;

-webkit-font-smoothing: antialiased;

}

.container {

display: table;

height: 100%;

width: 100%;

}

.container .container-inner {

display: table-cell;

text-align: center;

vertical-align: middle;

width: 500px;

}

.navigation {

margin: 0 auto;

width: 500px;

}

.navigation .button {

background: #ff9797;

box-sizing: border-box;

color: #fff;

display: inline-block;

height: 60px;

line-height: 60px;

padding: 0 30px;

text-decoration: none;

width: 245px;

}

.navigation .button.start {

float: left;

}

.navigation .button.finish {

float: right;

}

.navigation .button:active {

background-color: #f28f8f;

}

.loader {

background: rgba(0, 0, 0, 0.2);

height: 60px;

margin: 0 auto 10px;

overflow: hidden;

position: relative;

width: 500px;

}

.loader .stripes {

background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 10px, transparent 10px, transparent 20px);

height: 100%;

left: 0;

padding-right: 60px;

position: absolute;

top: 0;

width: 100%;

-webkit-animation: stripes 600ms linear 0s infinite;

-moz-animation: stripes 600ms linear 0s infinite;

animation: stripes 600ms linear 0s infinite;

-webkit-transform: translateZ(0);

-moz-transform: translateZ(0);

-ms-transform: translateZ(0);

-o-transform: translateZ(0);

transform: translateZ(0);

-webkit-transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1);

-moz-transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1);

transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1);

}

.loader .progress {

background: #abff97;

height: 100%;

left: 0;

overflow: hidden;

position: absolute;

top: 0;

width: 0;

-webkit-transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1);

-moz-transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1);

transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1);

}

.loader.loading .progress {

width: 98%;

-webkit-animation: loading 3000ms cubic-bezier(0.25, 0.46, 0.45, 0.94), waiting 60s cubic-bezier(0.165, 0.84, 0.44, 1) 3000ms;

-moz-animation: loading 3000ms cubic-bezier(0.25, 0.46, 0.45, 0.94), waiting 60s cubic-bezier(0.165, 0.84, 0.44, 1) 3000ms;

animation: loading 3000ms cubic-bezier(0.25, 0.46, 0.45, 0.94), waiting 60s cubic-bezier(0.165, 0.84, 0.44, 1) 3000ms;

}

.loader.complete .progress {

width: 100%;

-webkit-animation: complete 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 2 alternate;

-moz-animation: complete 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 2 alternate;

animation: complete 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 2 alternate;

}

.loader.complete .stripes {

opacity: 0;

-webkit-animation: none;

-moz-animation: none;

animation: none;

}

@-webkit-keyframes loading {

0% {

width: 0%;

}

100% {

width: 80%;

}

}

@-moz-keyframes loading {

0% {

width: 0%;

}

100% {

width: 80%;

}

}

@keyframes loading {

0% {

width: 0%;

}

100% {

width: 80%;

}

}

@-webkit-keyframes waiting {

0% {

width: 80%;

}

100% {

width: 98%;

}

}

@-moz-keyframes waiting {

0% {

width: 80%;

}

100% {

width: 98%;

}

}

@keyframes waiting {

0% {

width: 80%;

}

100% {

width: 98%;

}

}

@-webkit-keyframes complete {

0% {

background-color: #abff97;

}

100% {

background-color: #fff;

}

}

@-moz-keyframes complete {

0% {

background-color: #abff97;

}

100% {

background-color: #fff;

}

}

@keyframes complete {

0% {

background-color: #abff97;

}

100% {

background-color: #fff;

}

}

@-webkit-keyframes stripes {

0% {

left: 0;

}

100% {

left: -60px;

}

}

@-moz-keyframes stripes {

0% {

left: 0;

}

100% {

left: -60px;

}

}

@keyframes stripes {

0% {

left: 0;

}

100% {

left: -60px;

}

}