.cmd-progress { font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 28rpx; font-variant: tabular-nums; line-height: 1.5; color: rgba(0, 0, 0, 0.65); 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: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: 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 { -webkit-box-flex: 1; -webkit-flex: 1; 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; -webkit-transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s; 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-custom { max-width: 50%; margin-left: 16rpx; vertical-align: middle; display: inline-block; white-space: normal; word-wrap: break-word; word-break: break-all; line-height: 1; } .cmd-progress-text { min-width: 60rpx; text-align: left; margin-left: 16rpx; vertical-align: middle; display: inline-block; white-space: normal; 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-custom { display: block; position: absolute; line-height: 1; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 25%; right: 25%; margin: 0; overflow: hidden; white-space: normal; word-wrap: break-word; word-break: break-all; } .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%; } }