scss 径向进展仅限css

Posted 2021-05-17

<div class="slider-event-progress-chart-wrapper">
    <div class="slider-event-progress-chart" data-label="Sólo quedan" data-time-left="{{ $event->time_left_under->time }}h">
        <svg viewBox="-10 -10 220 220">
            <g fill="none" stroke-width="8" transform="translate(100,100)">
                <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
                <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
                <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
                <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
                <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
                <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
            </g>
        </svg>
        <svg viewBox="-10 -10 220 220">
            <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z"
                  stroke-dashoffset="{{ $event->time_left_under->dashoffset }}"></path>
        </svg>
    </div>
</div>

@keyframes progress-chart-animation {
  0% {
    stroke-dashoffset: 0
  }
}

.slider-event-progress-chart-wrapper {
  position: relative;
  display: inline-block;
  padding: 0;
  text-align: center;

  //@include hardware-acc;


  display: inline-block;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 120px;
	height: 120px;
	//line-height: 100px;
	margin-left: -60px;
	margin-top: -60px;

	background-color: rgba($myc_navy, 0.8);
	border-radius: 50%;
	box-shadow: 0 0 30px 6px rgba(black,0.5);

	@media screen and (max-width: 768px) {
		width: 90px;
		height: 90px;
		margin-left: -45px;
		margin-top: -45px;
	}
}

.slider-event-progress-chart {
  display: inline-block;
  position: absolute;
  top: -8px;
  left: -8px;
  text-align: center;

  width: calc(100% + 16px);
 // margin: 2rem;

  &:before { //title
  	display: block;
    content: attr(data-label);
    position: absolute;

    width: 100%;
    top: 48px;
    left: 0;
    text-align: center;

    font-family: $myc_font_panton;
		letter-spacing: 1px;
		@include rem(font-size, 10px);
		color: white;
		font-weight: bold;

		@media screen and (max-width: 768px) {
			top: 36px;
		}
  }

  &:after { //percent
  	display: block;
    content: attr(data-time-left);
    position: absolute;

    width: 100%;
    top: 60px;
    left: 0;
    text-align: center;

		font-family: $myc_font_panton_bold_italic;
		@include rem(font-size, 36px);
		font-style: normal;
		line-height: 1em;
		color: white;

		@media screen and (max-width: 768px) {
			@include rem(font-size, 24px);
			top: 48px;
		}
  }

  svg {
    width: 100%;

    &:nth-child(1) path {
      stroke: white;
    }

    &:nth-child(2) {
      position: absolute;
      left: 0;
      top: 0;
      transform: rotate(-90deg);
    }
    &:nth-child(2) path {
      fill: none;
      stroke-width: 10; //25
      stroke-dasharray: 630;
      stroke: rgba($myc_navy, 0.9); //myc_navy
      opacity:1;
      animation: progress-chart-animation 3s;
    }

    .active & {
    	&:nth-child(2) path {
	      //animation: progress-chart-animation 5s;
	    }
    }
  }
}