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:

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.

user_2626373 · Answer

Just use CSS animation for this.

.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);
  }
}

user_7692859 · Answer

You can use a keyframe to define the animation you want. Typical usage is as follows:

targetDiv {
  //for example
  animation: myAnimation 2s infinite;
}

//you can use either from and to, or progress percentages (0%, ..., 100%)
@keyframes myAnimation {
  from {
    //rules here...
  }
  to {
    //rules here...
  }
}

Demo for your case:

Edit: For the result you described in the comment, one option is to still use keyframes, but play on the D's border colors rather than its rotation. My version is not the best execution, but it should get you started:

.spinnerContainer {
    width: 40px;
    height: 50px;
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    animation: spin 0.5s linear infinite;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

@keyframes spin {
  0% {
    border-color: gray;
    border-top-color: purple;
  }
  
  25% {
    border-color: gray;
    border-right-color: purple;
  }
  
  50% {
    border-color: gray;
    border-bottom-color: purple;
  }
  
  75% {
    border-color: gray;
    border-left-color: purple;
  }
  
  100% {
    border-color: gray;
    border-top-color: purple;
  }
}

CSS Custom spinner using letter "D"

2 Answers