I cannot get @keyframes fill past 180 deg to stop where I want it to

Question

I have three progress circles as shown below. The problem I'm facing is the last one. I am trying to get it to complete 3/4 of the circle but I'm having issues at the 180 deg mark.

The image below shows where I want the progress bar to stop, but for the life of me I can't work it out.

The arrow on the image is the position I'm trying to get it to stop at.

Any advice or guidance would be greatly appreciated.

.circle-wrap {
  margin: 50px auto;
  width: 240px;
  height: 240px;
  background: #e5e5e5;
  border-radius: 50%;
  transform: rotate(-125deg);
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 240px;
  height: 240px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 240px, 240px, 120px);
}

.circle-wrap .circle .mask .fill {
  clip: rect(0px, 120px, 240px, 0px);
  background-color: #ffe100;
}

.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s forwards;
}

@keyframes fill {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate( var(--rt));
  }
}

.circle-wrap .inside-circle {
  width: 185px;
  height: 185px;
  border-radius: 50%;
  background: #fff;
  line-height: 185px;
  text-align: center;
  top: 28px;
  left: 28px;
  z-index: 100;
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: -4px;
  transform: rotate(114deg);
  font-style: italic;
  font-family: brandon-grotesque;
  padding: 0;
  position: relative;
}

.circle-wrap .inside-circle span {
  font-size: 1.5rem;
  letter-spacing: 0;
}

.circle-wrap .inside-circle .cone {
  width: 0;
  height: 0;
  border-left: 175px solid transparent;
  border-right: 175px solid transparent;
  border-top: 125px solid white;
  border-radius: 50%;
  transform: rotate(192deg);
  position: absolute;
  bottom: -33px;
  left: -96px;
  z-index: -1;
}

.circle-wrap .inside-circle .cone .dial-speeds {
  transform: rotate(179deg);
  position: relative;
  z-index: 1;
  font-weight: 400;
  font-style: normal;
}

.circle-wrap .inside-circle .cone .dial-speeds .left {
  position: absolute;
  bottom: -78px;
  width: 18px;
  height: 20px;
  left: -50px;
}

.circle-wrap .inside-circle .cone .dial-speeds .right {
  position: absolute;
  bottom: -78px;
  width: 18px;
  height: 20px;
  right: -50px;
}

.circle-wrap .inside-circle .cone .dial-speeds .right span {
  right: -16px;
  top: -58px;
  position: absolute;
  font-size: 15px;
}

.circle-wrap .inside-circle .cone .dial-speeds .left span {
  left: -16px;
  top: -58px;
  position: absolute;
  font-size: 15px;
}

 <div class="grid gap-0 grid-cols-3 text-left pt-24 max-w-[1000px] mx-auto">
    <div class="circle-wrap">
      <div class="circle">
        <div class="mask full">
          <div class="fill fill"></div>
        </div>
        <div class="mask half">
          <div class="fill fill" style="--rt:85deg"></div>
        </div>
        <div class="inside-circle">
          abc<span></span>
          <div class="cone">
            <div class="dial-speeds">
              <div class="left">
                <img src="">
                <span>abc</span>
              </div>
              <div class="right">
                <img src="">
                <span>abc</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="circle-wrap">
      <div class="circle">
        <div class="mask full">
          <div class="fill"></div>
        </div>
        <div class="mask half">
          <div class="fill" style="--rt:125deg"></div>
        </div>
        <div class="inside-circle">
          abc<span></span>
          <div class="cone">
            <div class="dial-speeds">
              <div class="left">
                <img src="">
                <span>abc</span>
              </div>
              <div class="right">
                <img src="">
                <span>abc</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="circle-wrap">
        <div class="circle">
          <div class="mask full">
            <div class="fill" style="--rt:180deg;"></div>
          </div>
          <div class="mask half" style="clip: rect(-71px, 404px, 240px, 0px);">
            <div class="fill"></div>
          </div>
          <div class="inside-circle">
            abc<span></span>
            <div class="cone">
              <div class="dial-speeds">
                <div class="left">
                    <img src="">
                  <span>abc</span>
                </div>
                <div class="right">
                    <img src="">
                  <span>abc</span>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</div>

check this where you can find better (and more up tp date) ideas to achieve what you want: https://stackoverflow.com/q/52205399/8620333 — Temani Afif, Aug 24 '21 at 00:00
I'm also looking for the animation part, that's the part I'm struggling with past the 180 deg mark. — John K Bell, Aug 24 '21 at 09:10

G-Cyrillus · Answer 1 · 2021-08-24T13:19:35.923

The var() value is to be set on the parent of your circles, so it is avalaible for both .fill elements. Then either use a smaller rotation or divide it by 2 (demo below) to be coherent with the visual (2 elements are rotating and overlapping in your code)

.circle-wrap {
  margin: 50px auto;
  width: 240px;
  height: 240px;
  background: #e5e5e5;
  border-radius: 50%;
  transform: rotate(-125deg);
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 240px;
  height: 240px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 240px, 240px, 120px);
}

.circle-wrap .circle .mask .fill {
  clip: rect(0px, 120px, 240px, 0px);
  background-color: #ffe100;
}

.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s forwards;
}

@keyframes fill {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate( calc(var(--rt) / 2 ));
  }
}

.circle-wrap .inside-circle {
  width: 185px;
  height: 185px;
  border-radius: 50%;
  background: #fff;
  line-height: 185px;
  text-align: center;
  top: 28px;
  left: 28px;
  z-index: 100;
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: -4px;
  transform: rotate(114deg);
  font-style: italic;
  font-family: brandon-grotesque;
  padding: 0;
  position: relative;
}

.circle-wrap .inside-circle span {
  font-size: 1.5rem;
  letter-spacing: 0;
}

.circle-wrap .inside-circle .cone {
  width: 0;
  height: 0;
  border-left: 175px solid transparent;
  border-right: 175px solid transparent;
  border-top: 125px solid white;
  border-radius: 50%;
  transform: rotate(192deg);
  position: absolute;
  bottom: -33px;
  left: -96px;
  z-index: -1;
}

.circle-wrap .inside-circle .cone .dial-speeds {
  transform: rotate(179deg);
  position: relative;
  z-index: 1;
  font-weight: 400;
  font-style: normal;
}

.circle-wrap .inside-circle .cone .dial-speeds .left {
  position: absolute;
  bottom: -78px;
  width: 18px;
  height: 20px;
  left: -50px;
}

.circle-wrap .inside-circle .cone .dial-speeds .right {
  position: absolute;
  bottom: -78px;
  width: 18px;
  height: 20px;
  right: -50px;
}

.circle-wrap .inside-circle .cone .dial-speeds .right span {
  right: -16px;
  top: -58px;
  position: absolute;
  font-size: 15px;
}

.circle-wrap .inside-circle .cone .dial-speeds .left span {
  left: -16px;
  top: -58px;
  position: absolute;
  font-size: 15px;
}

<div class="grid gap-0 grid-cols-3 text-left pt-24 max-w-[1000px] mx-auto">
    <div class="circle-wrap" style="--rt:85deg">
      <div class="circle">
        <div class="mask full">
          <div class="fill fill"></div>
        </div>
        <div class="mask half">
          <div class="fill fill"></div>
        </div>
        <div class="inside-circle">
          abc<span></span>
          <div class="cone">
            <div class="dial-speeds">
              <div class="left">
                <img src="">
                <span>abc</span>
              </div>
              <div class="right">
                <img src="">
                <span>abc</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="circle-wrap" style="--rt:125deg">
      <div class="circle">
        <div class="mask full">
          <div class="fill"></div>
        </div>
        <div class="mask half">
          <div class="fill"></div>
        </div>
        <div class="inside-circle">
          abc<span></span>
          <div class="cone">
            <div class="dial-speeds">
              <div class="left">
                <img src="">
                <span>abc</span>
              </div>
              <div class="right">
                <img src="">
                <span>abc</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="circle-wrap" style="--rt:180deg;">
        <div class="circle">
          <div class="mask full">
            <div class="fill"></div>
          </div>
          <div class="mask half">
            <div class="fill"></div>
          </div>
          <div class="inside-circle">
            abc<span></span>
            <div class="cone">
              <div class="dial-speeds">
                <div class="left">
                    <img src="">
                  <span>abc</span>
                </div>
                <div class="right">
                    <img src="">
                  <span>abc</span>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</div>

I cannot get @keyframes fill past 180 deg to stop where I want it to

1 Answers1