lin-view-ui/lib/theme-chalk/player-process.css

vue components library

@-webkit-keyframes ball-enter-animation{0%{transform:translateY(-50%) scale(0)}100%{transform:translateY(-50%) scale(1)}}@keyframes ball-enter-animation{0%{transform:translateY(-50%) scale(0)}100%{transform:translateY(-50%) scale(1)}}.lin-player-process-mask{position:relative;width:100%;padding:5px 0;cursor:pointer}.lin-player-process-time{position:absolute;top:-20px;left:0;padding:3px;font-size:12px;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:rgba(0,0,0,.5);border-radius:4px}.lin-player-process{position:relative;width:100%;height:3px;cursor:pointer;background-color:rgba(255,255,255,.2)}.lin-player-process-played{position:absolute;top:0;left:0;height:3px;background-color:#b7daff;transition:all .3s}.lin-player-process-loaded{position:absolute;top:0;left:0;height:3px;background-color:rgba(255,255,255,.4);transition:all .3s}.lin-player-process-ball{position:absolute;top:50%;right:-5px;width:11px;height:11px;background-color:#b7daff;border-radius:50%;transform:translateY(-50%)}.lin-player-process-fade-enter-active,.lin-player-process-fade-leave-active{transition:opacity .5s}.lin-player-process-fade-enter,.lin-player-process-fade-leave-to{opacity:0}.lin-player-process-ball-enter-active{-webkit-animation:ball-enter-animation .3s ease-out;animation:ball-enter-animation .3s ease-out}.lin-player-process-ball-leave-active{animation:ball-enter-animation .3s reverse ease-out}