What is causing the spinner with CSS rotation transform to bounce rhythmically?

In my design, I have created a simple Spinner icon in Figma. It's meant to be perfectly aligned at the center of an enclosing frame that has dimensions of 64x64. To achieve the rotating effect, I applied CSS rotation as shown below:

let rotation = 0;

function incrementAnimationFrame() {
  rotation = (6 + rotation) % 360;
  $('#rotationBlock').css('transform', `rotate(${rotation}deg)`);

  requestAnimationFrame(incrementAnimationFrame);
}

requestAnimationFrame(incrementAnimationFrame);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotationBlock" style="display: block; width: 160px; padding: 0px; margin: 0px;">
  <svg preserveAspectRatio="xMidYMid meet" fill="#FFD041" height="160px" viewBox="0 0 64 64">
    <path d="M35.6561 2.22362C43.2296...(SVG path data)...8\"></path>
  </svg>
</div>

https://codepen.io/jwir3/pen/dyvEQKa

The animation appears to slightly bob up and down, possibly due to how the SVG viewBox is set and the alignment of the Spinner's center. Is there a solution to eliminate this bouncing effect? Could it be an issue with the alignment precision in Figma?

cssanimationsvgrotationcss-transforms

Answer №1

The reason for this issue is that the SVG is not perfectly fitting inside the div. The height of the div is slightly greater than the SVG, which can be observed by inspecting the element in your web browser.

To resolve this problem, it is recommended to rotate the SVG directly instead of rotating the div. However, if you must rotate the div due to multiple nested elements, ensure that the dimensions of the element are accurate and not excessively large.

By the way, setting display: block for a div is unnecessary since it already has this property as its default value.

let rotation = 0;

function incrementAnimationFrame() {
  rotation = (6 + rotation) % 360;
  $('#rotationBlock').css('transform', `rotate(${rotation}deg)`);

  requestAnimationFrame(incrementAnimationFrame);
}

requestAnimationFrame(incrementAnimationFrame);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="rotationBlock" preserveAspectRatio="xMidYMid meet" fill="#FFD041" height="160px" viewBox="0 0 64 64">
    <path d="M35.6561 2.22362C43.2296 3.15353 50.1642 6.9344 55.0485 12.7967C59.9328 18.659 62.3997 26.1622 61.9472 33.7792C61.4947 41.3962 58.1567 48.5545 52.6126 53.7972C47.0686 59.04 39.7351 61.9732 32.1047 61.9998C24.4744 62.0265 17.1206 59.1445 11.5401 53.9406C5.95953 48.7367 2.57166 41.6019 2.06596 33.9882C1.56025 26.3746 3.97473 18.8544 8.81798 12.9581C13.6612 7.06183 20.5692 3.23264 28.1361 2.24987L28.9859 8.79255C23.0831 9.55919 17.6943 12.5463 13.9162 17.1458C10.1381 21.7454 8.25459 27.6118 8.64908 33.551C9.04357 39.4902 11.6864 45.0559 16.0396 49.1154C20.3929 53.1749 26.1294 55.423 32.0817 55.402...
  </svg>

Answer №2

Optimize your code by using minimal CSS:

.box {
  width:120px;
  height:120px;
  border-radius:50%;
  background:conic-gradient(#0000 10%,#FFD041 0); /* 10% of the border transparent */
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 15px),#000 0); /* 15px = border thickness */
  animation:r 1s linear infinite;
}
@keyframes r {
 to {transform:rotate(360deg)}
}
<div class="box"></div>

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

How to style the background color of the selected option in a <select> element using

Is there a specific style I can use to change the color of a selected option in a dropdown menu? For example: <HTML> <BODY> <FORM NAME="form1"> <SELECT NAME="mySelect" SIZE="7" style="background-color:red;"> <OPTION>Test 1 &l ...

javascripthtmlcss

Three image resources combined to create a unique border design in CSS

I am currently working on designing a webpage and am in need of creating a background border. I have access to three image resources for this task: one for the left side, another for the top, and the third for the right side. My struggle lies in finding s ...

htmlcss

CSS3 animations and transitions offer dynamic and engaging effects for websites

Could CSS3 animations be utilized for scrolling a window? In jQuery, you would typically use something like: $(window).animate({scrollTop: '+=200'}, 300, function() { }); Therefore, my inquiry is whether it is feasible to achieve a similar effe ...

jquerycssscroll

CSS: Styling different <a href> tags to appear uniform within identical size containers

I currently have some links displayed on my webpage. These links are encapsulated within a border and have a background set for them, essentially creating a box around each one. <!DOCTYPE html> <style> a { background: #DDD; border: #BB ...

css

Enable divs to be interactively chosen

I have created two selectable divs that function like buttons. By using the left and right arrow keys, I am able to select one of the divs with this code: document.addEventListener("keydown", keyDownDocument, false); function keyDownDocument(e) { var k ...

javascripthtmlcss

Changing the position of a Bootstrap popover dynamically from top to bottom

Struggling with the bootstrap popover here. I can't seem to change the popover position from top to bottom when it reaches the top of the viewport. I attempted to use placement: 'auto bottom' but unfortunately, it didn't do the trick f ...

javascriptjqueryhtmlcssbootstrap-popover

I'm trying to understand why this code isn't running properly. Can someone explain why my CSS is not being executed?

For some reason, using button .order{} to select elements inside the button is not applying the CSS codes as expected. The text color remains unchanged. However, when using just `.order` to select the elements, the CSS code works perfectly fine. Can someon ...

htmlcss

Enhance Your Images with Hovering Icons

Is there a way to display an icon checkmark over the main image when a user hovers over it? The icon should appear in the top right corner of the image. <div> <img class="result-image" src="{{$property->photo}}"> <! ...

htmlcss

Tips on utilizing CSS modules in React without changing class names

After starting to use css modules in my react project, I quickly realized the struggle of changing classnames to fit the requirements of css modules. For example, if we have a component using regular css: import React from 'react' import ". ...

javascriptcssreactjs

Incrementing counters within nested div elements

Looking to implement a counter-increment feature on ordered lists. The goal is for each ol to pick up where the previous count left off. The functionality is successful when there are no separate wrapping divs around the ols. However, the issue arises whe ...

htmlcsscss-counter

Ways to set a default image for an <img> tag

I am looking to set a default image to the img tag in case the user has not selected a profile picture for their account. Here is the current output: http://jsfiddle.net/LvsYc/2973/ Check out the default image here: This is the script being used: funct ...

javascriptjquerycsshtml

Difficulty with routing stylesheets in my Node Express server

Currently, I am setting up the back-end structure for my website. The file setup looks like this: public css main.css main_b.css index.hbs index_b.hbs server server.js To reference style sheets in the index files, I use link attributes wit ...

cssnode.jsexpress

"Make your slides smooth and responsive with the unslick option in slick

Currently implementing the Slick Slider on a WordPress website. The slider is designed to display 3 columns at a screen size of 1024px and above. When the screen size drops below 1024px, the slider adjusts to show 2 columns, and on mobile devices, it swit ...

javascriptjquerycssflexboxslick.js

In this guide, learn the best way to dynamically adjust image height to match the height of any device

I am trying to make sure that the image on the front page of my website fits the height of the screen or device, and resizes responsively without cropping when the device height changes. How can I achieve this? If you need a visual example of what I mean, ...

cssmobileresponsive-designcross-browser

Using jQuery functions like closest(), find(), and children(), it is possible to target and retrieve the sibling of a specific parent

Having trouble determining the URL of a using .closest, .find and potentially other jQuery methods. The webpage structure is as follows: ul ul ul.good li ... li li <a href="/findme">findme</a> ul . ...

jqueryhtmlcssfindparent-child

Tips on customizing the appearance of React rendering components

<div> <h3>{this.props.product.name}</h3> <h3>{this.props.product.code}</h3> {this.renderColors()} <article> <div da ...

javascripthtmlcssreactjs

The text within the button disappears when in the :before state

After implementing the code from this codepen, I decided to use the 3rd button design. .btn { line-height: 50px; height: 50px; text-align: center; width: 250px; cursor: pointer; } .btn-three { color: #FFF; transitio ...

htmlcssbuttonhover

What is the best way for me to locate and access the initial element that has been assigned the

How do I reference the first element with the "myabilities" class in the code snippet below? <div class="span6"> <h3 class="srvc-title">Responsive Design</h3> <p class="srvc-detail">Crafting great experie ...

csscss-selectors

Button for browsing weekly recipes in HTML table format

Seeking assistance in creating a dynamic weekly recipe webpage using HTML and CSS. The goal is to have a form where users can submit a recipe, which will then be added to a specific day of the week in a table displaying all recipes for that day. Can someon ...

htmlcss

`Align nth-child elements in the center based on varying display sizes`

How do I center the nth-child elements here? Currently, it aligns my divs in a row, which is what I want, but how can I center the elements in the middle of my page based on browser width? Right now, if I center the elements by changing left: px; it only w ...

htmlcss