1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| .pace { pointer-events: none; user-select: none; z-index: 2; position: fixed; margin: auto; top: 4px; left: 0; right: 0; height: 8px; border-radius: 8px; width: 6rem; background: #eaecf2; overflow: hidden; }
.pace-inactive .pace-progress { opacity: 0; transition: 0.3s ease-in; }
.pace.pace-inactive { opacity: 0; transition: 0.3s; top: -8px; }
.pace .pace-progress { box-sizing: border-box; transform: translate3d(0, 0, 0); position: fixed; z-index: 2; display: block; position: absolute; top: 0; right: 100%; height: 100%; width: 100%; background: #49b1f5; background: linear-gradient( to right, rgb(18, 194, 233), rgb(196, 113, 237), rgb(246, 79, 89) ); animation: gradient 2s ease infinite; background-size: 200%; }
|