CSS spinning triangle from center

Question

I was wondering if it is possible to make a triangle that spins exactly from the center.

html:

<div class="loader-wrapper">
    <div class="loader"></div>
</div>

css:

.loader-wrapper {
  width: 100%;
  height: 100vh;
  background-color: #11e;
}

@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 173.2px 100px;
  border-color: transparent transparent #007bff transparent;
  animation: 4s linear 0s infinite load;
}

Similar solution here http://stackoverflow.com/questions/16771225/css3-rotate-animation — DebRaj, Feb 27 '16 at 08:08

skycocoo · Answer 1 · 2018-06-01T19:45:07.317

A complete solution could be like this.

Simply saying, you should change the transform origin that match the actual center of the triangle (which is 66.66% by pure math).

Html:

<div class="loader">
    <div class="loader-wrapper">
        <div class="triangle"></div>
    </div>
</div>

CSS:

.loader {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 300px;
}

.loader-wrapper {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform by half of its width & height */
  transform: translate(-50%, -50%);
}

.triangle {
  display: block;
  position: relative;
  width: 0;
  height: 0;
  border-color: transparent transparent #e44750 transparent;
  border-width: 0px 100px 173.20508076px 100px;
  border-style: solid;
  transform-origin: 50% 66.66%;
  animation: spin 3s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

score 1 · Accepted Answer · answered Feb 27 '16 at 08:06

1

The transform-origin property can be used to change the origin of the transformation point. just add transform-origin: 107px 111px; to your .loader class.

You'll need to do some tuning though, to get it perfect.

answered Feb 27 '16 at 08:06

Nijraj Gelani

1,446
18
29

score -1 · Answer 3 · answered Feb 27 '16 at 07:43

-1

Try this:

.loader {
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 173.2px 100px;
  border-color: transparent transparent #007bff transparent;
  animation: 4s linear 0s infinite load;
}

JSFiddle

answered Feb 27 '16 at 07:43

Pedram

15,766
10
44
73

That does not spin round the center of the triangle. – DrevanTonder Feb 27 '16 at 07:50

CSS spinning triangle from center

3 Answers3