chowa/es/progress/style/progress.css

UI component library based on React

/**
 * @license chowa v1.1.3
 *
 * Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
@keyframes cw-progress-line-active {
  0% {
    width: 0;
    opacity: 0.6; }
  100% {
    width: 100%;
    opacity: 0; } }

@keyframes cw-progress-circle-active {
  0% {
    stroke: #7774e7; }
  50% {
    stroke: #b7b5f2; }
  100% {
    stroke: #7774e7; } }

.cw-progress {
  margin: 0;
  box-sizing: border-box; }

.cw-progress-line {
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 32px; }

.cw-progress-inner {
  flex: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #f8f8f8; }

.cw-progress-bg {
  margin: 0;
  padding: 0;
  background-color: #7774e7;
  width: 0;
  transition: all 0.2s ease; }

.cw-progress-line-status,
.cw-progress-line-percent {
  color: #616a6e;
  margin: 0;
  padding: 0 0 0 12px;
  box-sizing: border-box;
  line-height: 1; }

.cw-progress-line-percent {
  font-size: 14px; }

.cw-progress-line-status {
  font-size: 16px; }

.cw-progress-circle {
  position: relative;
  width: 140px;
  height: 140px;
  padding: 4px; }

.cw-progress-svg {
  margin: 0;
  padding: 0; }

.cw-progress-circle-track {
  stroke: #f8f8f8; }

.cw-progress-circle-fill {
  transition: all 0.2s ease;
  stroke: #7774e7; }
  .cw-progress-circle-fill.cw-progress-circle-gradient {
    stroke: url(#circle-gradient); }

.cw-progress-circle-percent,
.cw-progress-circle-status {
  color: #616a6e;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center; }

.cw-progress-circle-percent {
  font-size: 16px; }

.cw-progress-circle-status {
  font-size: 34px; }

.cw-progress-active .cw-progress-bg {
  position: relative; }
  .cw-progress-active .cw-progress-bg:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: block;
    background-color: #fff;
    animation: cw-progress-line-active 1s ease-in-out infinite; }

.cw-progress-active .cw-progress-circle-fill {
  animation: cw-progress-circle-active 2s ease-in-out infinite; }

.cw-progress-success .cw-progress-bg {
  background-color: #52c41a; }

.cw-progress-success .cw-progress-circle-fill {
  stroke: #52c41a; }

.cw-progress-success .cw-progress-line-status,
.cw-progress-success .cw-progress-circle-status {
  color: #52c41a; }

.cw-progress-exception .cw-progress-bg {
  background-color: #ed4014; }

.cw-progress-exception .cw-progress-circle-fill {
  stroke: #ed4014; }

.cw-progress-exception .cw-progress-line-status,
.cw-progress-exception .cw-progress-circle-status {
  color: #ed4014; }