@sms-frontend/components/lib/Progress/style/index.css

SMS Design React UI Library.

.sms-progress{position:relative;line-height:1;font-size:12px}.sms-progress-line,.sms-progress-steps{display:inline-block;max-width:100%;width:100%}.sms-progress-line-wrapper,.sms-progress-steps-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;max-width:100%;height:100%}.sms-progress-line-text,.sms-progress-steps-text{font-size:12px;margin-left:16px;color:var(--color-text-2);white-space:nowrap;text-align:right;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;min-width:32px}.sms-progress-line-text .sms-icon,.sms-progress-steps-text .sms-icon{font-size:12px;margin-left:4px}.sms-progress-line-outer{background-color:var(--color-fill-3);border-radius:100px;width:100%;position:relative;display:inline-block;overflow:hidden}.sms-progress-line-inner{height:100%;border-radius:100px;background-color:rgb(var(--primary-6));position:relative;-webkit-transition:width .6s cubic-bezier(.34,.69,.1,1),background .3s cubic-bezier(.34,.69,.1,1);transition:width .6s cubic-bezier(.34,.69,.1,1),background .3s cubic-bezier(.34,.69,.1,1);max-width:100%}.sms-progress-line-inner-buffer{position:absolute;background-color:var(--color-primary-light-3);height:100%;top:0;left:0;border-radius:0 100px 100px 0;max-width:100%;-webkit-transition:all .6s cubic-bezier(.34,.69,.1,1);transition:all .6s cubic-bezier(.34,.69,.1,1)}.sms-progress-line-inner-animate::after{content:'';display:block;position:absolute;top:0;width:100%;height:100%;border-radius:inherit;background:-webkit-gradient(linear,left top,right top,color-stop(25%,transparent),color-stop(50%,rgba(255,255,255,.5)),color-stop(75%,transparent));background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.5) 50%,transparent 75%);background-size:400% 100%;-webkit-animation:sms-progress-loading 1.5s cubic-bezier(.34,.69,.1,1) infinite;animation:sms-progress-loading 1.5s cubic-bezier(.34,.69,.1,1) infinite}.sms-progress-line-text .sms-icon{color:var(--color-text-2)}.sms-progress-steps-outer{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.sms-progress-steps-text{margin-left:8px;min-width:unset}.sms-progress-steps-text .sms-icon{color:var(--color-text-2)}.sms-progress-steps-item{height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;background-color:var(--color-fill-3);position:relative;display:inline-block}.sms-progress-steps-item:not(:last-of-type){margin-right:3px}.sms-progress-steps-item:last-of-type{border-top-right-radius:100px;border-bottom-right-radius:100px}.sms-progress-steps-item:first-of-type{border-top-left-radius:100px;border-bottom-left-radius:100px}.sms-progress-steps-item-active{background-color:rgb(var(--primary-6))}.sms-progress-steps.sms-progress-small{width:auto}.sms-progress-steps.sms-progress-small .sms-progress-steps-item{width:2px;-webkit-box-flex:unset;-ms-flex:unset;flex:unset;border-radius:2px}.sms-progress-steps.sms-progress-small .sms-progress-steps-item:not(:last-of-type){margin-right:3px}.sms-progress-is-warning .sms-progress-line-inner{background-color:rgb(var(--warning-6))}.sms-progress-is-warning .sms-progress-steps-item-active{background-color:rgb(var(--warning-6))}.sms-progress-is-warning .sms-progress-line-text .sms-icon,.sms-progress-is-warning .sms-progress-steps-text .sms-icon{color:rgb(var(--warning-6))}.sms-progress-is-success .sms-progress-line-inne{background-color:rgb(var(--success-6))}.sms-progress-is-success .sms-progress-steps-item-active{background-color:rgb(var(--success-6))}.sms-progress-is-success .sms-progress-line-text .sms-icon,.sms-progress-is-success .sms-progress-steps-text .sms-icon{color:rgb(var(--success-6))}.sms-progress-is-error .sms-progress-line-inner{background-color:rgb(var(--danger-6))}.sms-progress-is-error .sms-progress-steps-item-active{background-color:rgb(var(--danger-6))}.sms-progress-is-error .sms-progress-line-text .sms-icon,.sms-progress-is-error .sms-progress-steps-text .sms-icon{color:rgb(var(--danger-6))}.sms-progress-small .sms-progress-line-text{font-size:12px;margin-left:16px}.sms-progress-small .sms-progress-line-text .sms-icon{font-size:12px}.sms-progress-large .sms-progress-line-text{font-size:16px;margin-left:16px}.sms-progress-large .sms-progress-line-text .sms-icon{font-size:14px}.sms-progress-circle{display:inline-block}.sms-progress-circle-wrapper{position:relative;text-align:center;line-height:1;display:inline-block;vertical-align:text-bottom}.sms-progress-circle-svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.sms-progress-circle-text{font-size:14px}.sms-progress-circle-text .sms-icon{font-size:16px;color:var(--color-text-2)}.sms-progress-circle .sms-progress-circle-text{position:absolute;top:50%;left:50%;color:var(--color-text-3);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.sms-progress-circle-mask{stroke:var(--color-fill-3)}.sms-progress-circle-path{stroke:rgb(var(--primary-6));-webkit-transition:stroke-dashoffset .6s cubic-bezier(0,0,1,1) 0s,stroke .6s cubic-bezier(0,0,1,1);transition:stroke-dashoffset .6s cubic-bezier(0,0,1,1) 0s,stroke .6s cubic-bezier(0,0,1,1)}.sms-progress-mini .sms-progress-circle-mask{stroke:var(--color-primary-light-3)}.sms-progress-mini .sms-progress-circle-path{stroke:rgb(var(--primary-6))}.sms-progress-mini.sms-progress-is-warning .sms-progress-circle-mask{stroke:var(--color-warning-light-3)}.sms-progress-mini.sms-progress-is-error .sms-progress-circle-mask{stroke:var(--color-danger-light-3)}.sms-progress-mini.sms-progress-is-success .sms-progress-circle-mask{stroke:var(--color-success-light-3)}.sms-progress-mini.sms-progress-is-success .sms-progress-circle-wrapper .sms-icon-check{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.sms-progress-mini .sms-progress-circle-text{position:static;top:unset;left:unset;-webkit-transform:unset;transform:unset}.sms-progress-small .sms-progress-circle-text{font-size:13px}.sms-progress-small .sms-progress-circle-text .sms-icon{font-size:14px}.sms-progress-large .sms-progress-circle-text{font-size:16px}.sms-progress-large .sms-progress-circle-text .sms-icon{font-size:16px}.sms-progress-is-warning .sms-progress-circle-path{stroke:rgb(var(--warning-6))}.sms-progress-is-warning .sms-icon{color:rgb(var(--warning-6))}.sms-progress-is-success .sms-progress-circle-path{stroke:rgb(var(--success-6))}.sms-progress-is-success .sms-icon{color:rgb(var(--success-6))}.sms-progress-is-error .sms-progress-circle-path{stroke:rgb(var(--danger-6))}.sms-progress-is-error .sms-icon{color:rgb(var(--danger-6))}@-webkit-keyframes sms-progress-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes sms-progress-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}