html - CSS Custom spinner using letter "D"

Question

I am trying to create a custom spinner on the letter "D" (as opposed to the animated ellipses, or circle with rotating bar, etc). Here is the code I currently have for the shape of the spinner:

HTML:

<div class="spinnerContainer"></div>
<div class="loader"></div>

CSS:

.spinnerContainer {
    width: 40px;
    height: 50px;
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    transform: rotate(0deg);
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

I have also included this, as well as the spinner implementation from W3Schools for example purposes, in a jsfiddle here: https://jsfiddle.net/wuvc70sp/1/ but am wondering how I can animate over the "D" similar to the animation on the circle on the W3Schools spinner simply and easily.

I tried using CSS animation to do each component individually (i.e. the vertical line had its own animation, the straight portions on the curve had their own animations, etc.), but it didn't work too well, and didn't seem like an elegant solution either. I am relatively new to more complicated CSS animations, so please excuse me if this is something relatively simple to do.

*** EDIT *** To clarify, I do not want to make the "D" spin. Rather, I want to snake a different color through the "D", as if the "D" was a track, and the color was a car driving laps.

标签： htmlcsscss-animations

Answer 1

只需为此使用 CSS 动画。

.spinner {
    width: 40px;
    height: 50px;
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    transform: rotate(0deg);
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    margin: 50px;
    animation: 3s spin infinite linear;
}

@keyframes spin {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

<div class="spinner"></div>