vue-amazing-ui/lib/progress/Progress.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.fade-enter-active[data-v-a2f65735],.fade-leave-active[data-v-a2f65735]{transition:opacity .2s}.fade-enter-from[data-v-a2f65735],.fade-leave-to[data-v-a2f65735]{opacity:0}.progress-line-wrap[data-v-a2f65735]{display:flex;align-items:center;width:var(--progress-size);height:calc(var(--progress-font-size) * 1.57142857);font-size:var(--progress-font-size);line-height:1.57142857}.progress-line-wrap .progress-inner[data-v-a2f65735]{width:100%;background:#0000000f;border-radius:100px;overflow:hidden}.progress-line-wrap .progress-inner .progress-bg[data-v-a2f65735]{position:relative;background:var(--progress-primary-color);border-radius:var(--progress-border-radius);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.progress-line-wrap .progress-inner .progress-bg[data-v-a2f65735]:after{content:"";background-image:linear-gradient(90deg,#ffffff4d,#ffffff80);animation:progressRipple-a2f65735 2s cubic-bezier(.4,0,.2,1) infinite}@keyframes progressRipple-a2f65735{0%{position:absolute;inset:0 100% 0 0;opacity:1}66%{position:absolute;inset:0;opacity:0}to{position:absolute;inset:0;opacity:0}}.progress-line-wrap .progress-inner .line-success[data-v-a2f65735]{background:var(--progress-success-color)!important}.progress-line-wrap .progress-success[data-v-a2f65735]{width:40px;text-align:center;display:inline-flex;align-items:center;padding-left:8px;flex-shrink:0}.progress-line-wrap .progress-success .icon-svg[data-v-a2f65735]{display:inline-block;font-size:var(--progress-font-size);fill:currentColor;color:var(--progress-success-color)}.progress-line-wrap .progress-success .progress-success-info[data-v-a2f65735]{flex-shrink:0;width:40px;font-size:var(--progress-font-size);padding-left:8px;color:var(--progress-success-color)}.progress-line-wrap .progress-text[data-v-a2f65735]{flex-shrink:0;min-width:40px;font-size:var(--progress-font-size);padding-left:8px;color:#000000e0}.progress-circle-wrap[data-v-a2f65735]{display:inline-block;position:relative;width:var(--progress-size);height:var(--progress-size)}.progress-circle-wrap .progress-circle .circle-trail[data-v-a2f65735]{stroke:#0000000f;stroke-dashoffset:0;transition:stroke-dashoffset .3s ease 0s,stroke-dasharray .3s ease 0s,stroke .3s ease 0s,stroke-width .06s ease .3s,opacity .3s ease 0s}.progress-circle-wrap .progress-circle .circle-path[data-v-a2f65735]{stroke:var(--progress-primary-color);stroke-dashoffset:0;transition:stroke-dashoffset .3s ease 0s,stroke-dasharray .3s ease 0s,stroke .3s ease 0s,stroke-width .06s ease .3s,opacity .3s ease 0s}.progress-circle-wrap .progress-circle .circle-path-success[data-v-a2f65735]{stroke:var(--progress-success-color)!important}.progress-circle-wrap .icon-svg[data-v-a2f65735]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-block;width:30%;height:30%;fill:currentColor;color:var(--progress-success-color)}.progress-circle-wrap .progress-success-info[data-v-a2f65735]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;font-size:var(--progress-font-size);line-height:1;text-align:center;color:var(--progress-success-color)}.progress-circle-wrap .progress-text[data-v-a2f65735]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;font-size:var(--progress-font-size);line-height:1;text-align:center;color:#000000d9}