digitalMen/uni_modules/lime-circle/components/l-circle/index.scss

/* #ifndef APP-NVUE */
// @import '@/uni_modules/lime-ui/style/index.scss';
@supports(background: conic-gradient(#000, #fff)) {
	.check {
		height: 1rpx;
		position: absolute;
	}
}
@property --l-circle-percent {
  syntax: '<percentage>';
  initial-value: 25%;
  inherits: false;
}
$fill-2: var(--l-fill-2, rgba(0, 0, 0, 0.06));
$circle-trail-cap-size: var(--l-circle-trail-cap-size, 6px);
$circle-trail-cap-color: currentColor;//var(--l-circle-trail-cap-color, currentColor);
$circle-stroke-cap-size: var(--l-circle-stroke-cap-size, 6px);
$circle-stroke-cap-start-color: var(--l-circle-stroke-cap-start-color, $fill-2);
$circle-stroke-cap-end-color: var(--l-circle-stroke-cap-end-color, $fill-2);
:root {
	display: inline-block;
}
/*  #endif */
.l-circle {
	position: relative;
	display: inline-block;
	/* #ifndef APP-NVUE */
	&__canvas {
		width: 100%;
		height: 100%;
	}
	/*  #endif */
	&__inner{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		align-items: center;
		justify-content: center;
		/* #ifndef APP-NVUE */
		display: flex;
		/*  #endif */
	}
	/* #ifdef APP-NVUE */
	&__view {
		flex: 1;
	}
	/*  #endif */
	/* #ifndef APP-NVUE */
	&__trail,&__stroke,&__stroke-line {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	&__stroke-line {
		z-index: 2;
		background: var(--l-background);
	}
	/*  #endif */
}

/* #ifndef APP-NVUE */
.is-round {
	.l-circle {
		&__trail {
			.cap {
				position: absolute;
				display: block;
				width: $circle-trail-cap-size;
				height: $circle-trail-cap-size;
				background-color: $circle-trail-cap-color;
				z-index: 10;
				border-radius: 50%;
				&.start {
					left: var(--l-circle-trail-cap-start-x, 14%);
					top: var(--l-circle-trail-cap-start-y, 81%);
				}
				&.end {
					left: var(--l-circle-trail-cap-end-x, 14%);
					top: var(--l-circle-trail-cap-end-y, 81%);
				}
			}
		}
		&__stroke .cap{
			position: absolute;
			display: block;
			width: $circle-stroke-cap-size;
			height: $circle-stroke-cap-size;
			background-color: $circle-stroke-cap-start-color;
			/* z-index: 10; */
			border-radius: 50%;
			transition: opacity 300ms ease-out;
			opacity: var(--l-circle-stroke-cap-opacity, 0);
			&.start {
				left: var(--l-circle-stroke-cap-start-x, 14%);
				top: var(--l-circle-stroke-cap-start-y, 81%);
				background-color: $circle-stroke-cap-start-color;
			}
			&.end {
				left: var(--l-circle-stroke-cap-end-x, 14%);
				top: var(--l-circle-stroke-cap-end-y, 81%);
				z-index: -1;
				background-color: $circle-stroke-cap-end-color;
			}
		}
	}
}
.clockwise {
	transform: translateY(var(--l-circle-offset-top, 0)) scale(-1,1);
}
.clockwise .l-circle__inner{
	transform: scale(-1,1);
}
/*  #endif */