Impeccable endless spinning for the symbol ֍

Looking to replace a loading spinner with this character:

֍

Here's my current setup:

.spinner::after {
  animation: rotating 2s linear infinite;
  content: "֍";
  font-size: 60px;
  display: inline-block;
  font-weight: normal;
  transform-origin: 50% 50%;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg) scale(1);
    color: rgba(0, 0, 0, .5);
  }
  50% {
    transform: rotate(180deg) scale(.8);
    color: rgba(0, 0, 0, .85);
  }
  100% {
    transform: rotate(360deg);
    color: rgba(0, 0, 0, .5);
  }
}
<i class="spinner"></i>

Although it works, the rotation isn't perfect as it doesn't happen around the exact center of the character despite using

transform-origin: 50% 50%;

This makes the animation look subpar. Any suggestions on how to improve it?

csscss-animations

Answer №1

To achieve the desired effect, I would suggest using a fixed height equal to the font-size and adjusting the line-height until it looks right. It's not necessary to specify the transform-origin property since it defaults to center.

.spinner::after {
  content: "֍";
  font-size: 60px;
  font-weight: normal;
  line-height: 0.8;
  display: inline-block;
  height: 60px;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg) scale(1);
    color: rgba(0, 0, 0, .5);
  }
  50% {
    transform: rotate(180deg) scale(.8);
    color: rgba(0, 0, 0, .85);
  }
  100% {
    transform: rotate(360deg);
    color: rgba(0, 0, 0, .5);
  }
}
<i class="spinner"></i>

Answer №2

Due to the discrepancy in character height and width, this issue arises...

I attempted to adjust the height to achieve the desired outcome...

Here is the resulting solution:

.spinner::after {
  animation: rotating 2s linear infinite;
  content: "֍";
  height: 80px;
  font-size: 60px;
  display: inline-block;
  font-weight: normal;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg) scale(1);
    color: rgba(0, 0, 0, .5);
  }
  50% {
    transform: rotate(180deg) scale(.8);
    color: rgba(0, 0, 0, .85);
  }
  100% {
    transform: rotate(360deg);
    color: rgba(0, 0, 0, .5);
  }
}
<i class="spinner"></i>

Answer №3

Three Key Features

line-height: 3; 
transform-origin: 50% 54%; 
text-align: center;

Example

.spinner::after {
  animation: spin 2s infinite linear;
  content: "֍";
  font-size: 5em;
  display: inline-block;
  font-weight: normal;
  /* Required */
  line-height: 3;
  /* Required */
  transform-origin: 50% 54%;
  /* Required */
  text-align: center;
  /* Optional for Position */
  position: relative;
  width: 3em;
  top: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
    color: rgba(0, 0, 0, .5);
  }
  50% {
    transform: rotate(180deg) scale(.8);
    color: rgba(0, 0, 0, .85);
  }
  100% {
    transform: rotate(360deg);
    color: rgba(0, 0, 0, .5);
  }
}
<i class="spinner"></i>

Answer №4

Rotating a rectangle shape may not result in a perfect center, but with a square shape, you will achieve a perfect center.

Check out the demo below:

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: brown;
    text-align: center;
    position: relative;
    margin: 10px;
    float: left;
}

.spinner0::after {
  animation: rotating 2s linear infinite;
  content: "֍";
  height: 80px;
  font-size: 60px;
  display: inline-block;
  font-weight: normal;
}
...

<div>
  <i class="spinner1"></i>
</div>
<div>
  <i class="spinner2"></i>
</div>
<div>
  <i class="spinner3"></i>
</div>

If you still want to rotate a rectangular shape or icon, then along with rotation, you have to adjust its position slightly.

I hope you understand my point here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating an error icon using only CSS, identical to the one shown in the picture

I'm attempting to create a similar X icon, resembling the one shown here: Here is the HTML code I am using: <div class='error-circle'> <div>X</div> </div> And this is the corresponding CSS: .error-circle{ ...

htmlcsscss-shapes

Experiencing an unusual gap following the menu on mobile view for my WordPress website?

I recently launched a WordPress website dedicated to education. In order to make some adjustments, I added subheaders to each page with a simple display:none setting. Surprisingly, while everything looked perfect on desktop view, I noticed some extra spa ...

csswordpresstwitter-bootstrap

What are some ways to create responsive elements using Bootstrap?

I'm looking for assistance in using bootstrap to divide a screen into 8 responsive parts (2 at the top, 2 in the middle, and 2 at the bottom). Can anyone help me with this? ...

htmlcsstwitter-bootstrap

Issues with functionality of drop-down menu

For some reason, when I hover over the menu item "support," the text doesn't show up in the drop-down menu. I've double-checked my CSS multiple times, but I can't seem to pinpoint where the issue lies. HTML Code <body> <div class= ...

cssdrop-down-menu

Is there a native horizontal divider available in Bootstrap 4?

Is there a predefined horizontal divider in Bootstrap 4? I currently have this: <style type="text/css> .h-divider{ margin-top:5px; margin-bottom:5px; height:1px; width:100%; border-top:1px solid gray; } </style> However, I would prefer t ...

htmlcssbootstrap-4twitter-bootstrap-4

The browser Internet Explorer fails to recognize the @media screen rule

Currently, I'm focusing on creating a responsive design for a web page. The issue I am encountering involves loading data via ajax to render forms. Strangely, only Internet Explorer seems to think that the width is less than 768px after rendering (thu ...

javascriptcssajaxinternet-explorerjoomla3.0

AngularJS seems to have trouble with routing functionality

I've recently started learning AngularJS and have been following CodeSchool's video series. However, I've encountered an error when trying to route through a click on an image. Can someone please assist me with this? Below are my HTML and J ...

javascripthtmlcssangularjsweb

Customizing the cursor for disabled custom controls in Bootstrap 4

I'm having trouble changing the cursor for disabled custom-control elements like checkboxes and radiobuttons. The following style isn't working as expected: .custom-control-input:disabled ~ .custom-control-label::before { cursor: not-allowe ...

cssbootstrap-4twitter-bootstrap-4

Ways to adjust HTML table row background through hover effect using inline CSS

My HTML table has columns with different colors assigned to each cell using CSS classes. When hovering over a row, the background color changes thanks to CSS declarations in my document's style block: table tr:hover td { background-color: pink; } How ...

htmlcsshtml-tablehoverinline-styles

What techniques can I use to format my blockquotes in this particular style?

I'm struggling to figure out how to incorporate yellow blockquotes into my quotes without the formatting causing unwanted indents and line heights. My goal is to achieve something like this: https://i.sstatic.net/4O1NR.png This is what I've at ...

htmlcss

:valid CSS remains visible even if $valid is set to false

Here is the code I've been working on. I have implemented a custom directive to check if two passwords match. Below is my HTML: <!-- confirm password --> <div class="row"> <div class="col-xs-10 col-centered"> ...

htmlangularjscss

Incorporate the list seamlessly into the remaining content of the page

https://i.sstatic.net/lIsnd.png https://i.sstatic.net/Nftto.png I am currently developing a Vue component that utilizes an API call to search for a list of cities based on user input. My challenge is ensuring that the displayed list does not overlap with ...

htmlcssvue.js

Highlighted top and bottom borders accenting a vertical list

I am working on a list that contains four items. Each item should have top and bottom borders set to 1px solid grey by default. There is a JavaScript rotator in place that adds a 'highlighted' class to the selected list element, which should have ...

jqueryhtmlcss

Creating a seamless transition from 2 CSS grid columns to 1 on mobile devices without the need for a media query

Is utilizing a media query the sole solution for keeping itemX and itemY in the same cell on each device? Are there any native CSS grid methods that could achieve the same result? Feel free to check out the demonstration on the following fiddle: https://j ...

cssmedia-queriescss-grid

Beginner: Interested in creating a web application with HTML, CSS, AngularJS, NodeJS, and MySQL?

After extensive searching on the internet, I have yet to come across a definitive answer. I am in the early stages of developing a web application and want to ensure that I am using the correct languages before diving too deep into it. Currently, my plan ...

htmlmysqlcssangularjsnode.js

Currently utilizing Yii framework to customize the appearance of a DIV element by specifying the CSS properties within the View, and subsequently storing the CSS file

I am looking for a way to allow users to customize the properties of a parent div, such as color, background, and other CSS styles, directly from the WordPress theming dashboard interface. Can someone please guide me in the right direction? ...

jqueryhtmlcsswordpressyii

How can you make an element be positioned in the center

Suppose I have a series of links like: <a>foobar</a><a>foobar</a><a>foobar</a><a id="center">foobar</a><a>foobar</a> If one of them has an id="center", is it possible to position it in the cente ...

javascriptjqueryhtmlcss

Tips for eliminating excess padding hidden by carousel controls

Below is the code snippet I have implemented: index.html html, body { margin: 0; padding: 0; } body { width: 100%; height: 100%; } .container { width: 100vw; height: 100vh; background-color: #fc2; } /*.container .carousel slide .carou ...

htmlcsstwitter-bootstrap

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Currently, I am working on enhancing my carousel by implementing a zoom effect when hovering over the images. However, I have encountered an issue where the image gets hidden within the div container and doesn't overflow as expected. I tried adjusting ...

javascriptcssreactjsnext.jssass

Reveal the concealed button with a jQuery click event

I have a simple question that has been elusive to find an answer for on the internet. Can anyone please help? <input hidden="true" class="btnsubmit" id="myaddslide2" onClick="UPCURSLIDE()" type="button" value="UPDATE"> <script> function ...

javascriptjqueryhtmlcss