fine-true/lib/progress/index.css

A small and beautiful Vue3 version of the UI Library

@keyframes fine-progress-active{0%{transform:translate(-100%) scaleX(0);opacity:.1}20%{transform:translate(-100%) scaleX(0);opacity:.5}to{transform:translate(0) scaleX(1);opacity:0}}.fine-progress{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:tnum;display:inline-block}.fine-progress-line{position:relative;width:100%;font-size:14px}.fine-progress-outer{display:inline-block;width:100%;margin-right:0;padding-right:0}.fine-progress-inner{position:relative;display:inline-block;width:100%;overflow:hidden;vertical-align:middle;background-color:#f5f5f5;border-radius:100px}.fine-progress-bg{position:relative;background-color:#1890ff;border-radius:100px;transition:all .4s cubic-bezier(.08,.82,.17,1) 0s}.fine-progress-show-info .fine-progress-outer{margin-right:calc(-2em - 8px);padding-right:calc(2em + 8px)}.fine-progress-text{display:inline-block;width:2em;margin-left:8px;color:#000000d9;font-size:1em;line-height:1;white-space:nowrap;text-align:left;vertical-align:middle;word-break:normal}.fine-progress-status-exception .fine-progress-bg{background-color:#ff4d4f}.fine-progress-status-exception .fine-progress-text i{color:#ff4d4f}.fine-progress-status-success .fine-progress-text i{color:#1890ff}.fine-progress-bg::before{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;border-radius:10px;opacity:0;animation:fine-progress-active 2.4s cubic-bezier(.23,1,.32,1) infinite;content:''}