.cmd-progress { box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: inline-block; } .cmd-progress-line { width: 100%; font-size: 28rpx; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; } .cmd-progress-outer { display: inline-block; width: 100%; margin-right: 0; padding-right: 0; } .cmd-progress-show-info .cmd-progress-outer { flex: 1; } .cmd-progress-inner { display: inline-block; width: 100%; background-color: #f5f5f5; border-radius: 200rpx; vertical-align: middle; position: relative; } .cmd-progress-circle-trail { stroke: #f5f5f5; } .cmd-progress-circle-path { stroke: #1890ff; -webkit-animation: appear 0.3s; animation: appear 0.3s; } .cmd-progress-success-bg, .cmd-progress-bg { background-color: #1890ff; transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s; position: relative; } .cmd-progress-success-bg { background-color: #52c41a; position: absolute; top: 0; left: 0; } .cmd-progress-text { word-break: normal; width: 60rpx; text-align: left; margin-left: 16rpx; vertical-align: middle; display: inline-block; white-space: nowrap; color: rgba(0, 0, 0, 0.45); line-height: 1; } .cmd-progress-status-active .cmd-progress-bg:before { content: ""; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 20rpx; -webkit-animation: cmd-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; animation: cmd-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; } .cmd-progress-status-exception .cmd-progress-bg { background-color: #f5222d; } .cmd-progress-status-exception .cmd-progress-text { color: #f5222d; } .cmd-progress-status-exception .cmd-progress-circle-path { stroke: #f5222d; } .cmd-progress-status-success .cmd-progress-bg { background-color: #52c41a; } .cmd-progress-status-success .cmd-progress-text { color: #52c41a; } .cmd-progress-status-success .cmd-progress-circle-path { stroke: #52c41a; } .cmd-progress-circle .cmd-progress-inner { position: relative; line-height: 1; background-color: transparent; } .cmd-progress-circle .cmd-progress-text { display: block; position: absolute; width: 100%; text-align: center; line-height: 1; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; margin: 0; color: rgba(0, 0, 0, 0.65); white-space: normal; } .cmd-progress-circle .cmd-progress-status-exception .cmd-progress-text { color: #f5222d; } .cmd-progress-circle .cmd-progress-status-success .cmd-progress-text { color: #52c41a; } @-webkit-keyframes cmd-progress-active { 0% { opacity: 0.1; width: 0; } 20% { opacity: 0.5; width: 0; } 100% { opacity: 0; width: 100%; } } @keyframes cmd-progress-active { 0% { opacity: 0.1; width: 0; } 20% { opacity: 0.5; width: 0; } 100% { opacity: 0; width: 100%; } }