Slower progress bar animation
This commit is contained in:
parent
37b8c0241f
commit
566c29363f
2 changed files with 2 additions and 2 deletions
|
@ -181,7 +181,7 @@ a { color: black }
|
||||||
|
|
||||||
.progressbar {
|
.progressbar {
|
||||||
background: #26C281; position: fixed; width: 100%; z-index: 100; top: 0; left: 0; transform: scaleX(0); transform-origin: 0% 0%; transform:translate3d(0,0,0);
|
background: #26C281; position: fixed; width: 100%; z-index: 100; top: 0; left: 0; transform: scaleX(0); transform-origin: 0% 0%; transform:translate3d(0,0,0);
|
||||||
height: 2px; transition: transform 0.5s, opacity 1s; display: none; backface-visibility: hidden; transform-style: preserve-3d;
|
height: 2px; transition: transform 1s, opacity 1s; display: none; backface-visibility: hidden; transform-style: preserve-3d;
|
||||||
}
|
}
|
||||||
.progressbar .peg {
|
.progressbar .peg {
|
||||||
display: block; position: absolute; right: 0; width: 100px; height: 100%;
|
display: block; position: absolute; right: 0; width: 100px; height: 100%;
|
||||||
|
|
|
@ -194,7 +194,7 @@ a { color: black }
|
||||||
|
|
||||||
.progressbar {
|
.progressbar {
|
||||||
background: #26C281; position: fixed; width: 100%; z-index: 100; top: 0; left: 0; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0) ; transform-origin: 0% 0%; transform:translate3d(0,0,0);
|
background: #26C281; position: fixed; width: 100%; z-index: 100; top: 0; left: 0; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0) ; transform-origin: 0% 0%; transform:translate3d(0,0,0);
|
||||||
height: 2px; -webkit-transition: transform 0.5s, opacity 1s; -moz-transition: transform 0.5s, opacity 1s; -o-transition: transform 0.5s, opacity 1s; -ms-transition: transform 0.5s, opacity 1s; transition: transform 0.5s, opacity 1s ; display: none; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden ; transform-style: preserve-3d;
|
height: 2px; -webkit-transition: transform 1s, opacity 1s; -moz-transition: transform 1s, opacity 1s; -o-transition: transform 1s, opacity 1s; -ms-transition: transform 1s, opacity 1s; transition: transform 1s, opacity 1s ; display: none; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden ; transform-style: preserve-3d;
|
||||||
}
|
}
|
||||||
.progressbar .peg {
|
.progressbar .peg {
|
||||||
display: block; position: absolute; right: 0; width: 100px; height: 100%;
|
display: block; position: absolute; right: 0; width: 100px; height: 100%;
|
||||||
|
|
Loading…
Reference in a new issue