Crafting an animated experience using the SX attribute in Material-UI version 5

Currently, I am working on developing an animated spinner using SVG as a loader. After browsing online, I came across examples that utilize Styled Components for this purpose; however, it seems that approach is no longer supported.

Do any of you have alternative suggestions or solutions for achieving this animation effect? I attempted to incorporate the '@keyframes spin' property into my SX code, as shown below:

<Box
 sx={{ 
 animation: '$test 1s linear infinite',
 '@keyframes spin': {
   from: {
    transform: 'rotate(0dg)'
  },
   to: {
    transform: 'rotate(360dg)'
  }
 }
}}
>

Despite my efforts, I was unable to create a successful animation using the SX property in MUI v5, following a similar logic to Styled Components.

I am curious if there is a way to achieve this animation effect without relying on CSS files and classes...

cssreactjsanimationmaterial-ui

Answer №1

I have found that with MUI5, adding keyframes to SX props works perfectly fine. Here is an example:

            <Box sx={{
                "@keyframes width-increase": {
                    "0%": {
                        width: "100px"
                    },
                    "100%": {
                        width: "300px"
                    }
                },
                width: "100px",
                height: "50px",
                backgroundColor: "red",
                animation: "width-increase 1s ease infinite",
            }}></Box>

Remember to initialize the keyframes before using them.

I hope this explanation helps you out...

Answer №2

The name of your @keyframe is "spin", but you forgot to use it when assigning properties to your animation. Simply replacing $test with "spin" should resolve the issue.

<Box
 sx={{ 
 animation: 'spin 1s linear infinite',
 '@keyframes spin': {
   from: { transform: 'rotate(0dg)' },
   to: { transform: 'rotate(360dg)' }
 }
}}
>

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

The IE browser iframe contains a src attribute pointing to a source, yet the body and head sections

Encountering an issue when using the IE browser, where the iframe shows a src source but the body and head are empty. Oddly enough, copying this src reveals that it can be opened in a new IE page. Any insights on this? Thank you! https://i.sstatic.net/rCc ...

reactjsinternet-exploreriframe

Blank page issue with Electron and React-BoilerPlate

While my app works flawlessly in Dev mode, it fails to function properly in Production. My folder structure is organized as follows: (build,dist,node_modules,public,src). build dist node_modules public Main.js index.html src index.tsx Within my packa ...

node.jsreactjselectronreact-boilerplate

Retrieve the most recent CSS or JavaScript code following a dynamic loading process

During my web page development, I frequently utilized the time() function for dynamic refresh. <link rel="stylesheet" href="/theme.css<?php echo '?'.time(); ?>"> Now that my code (style sheet) is more stable, I am interested in cach ...

javascriptphpcss

Unable to implement the hover property for the entire class in CSS

I am struggling to highlight the entire class element on hover. Even though I have specified the button class as a selector, only the background color of the anchor tag is changing when I hover over the button. What could be causing this issue and how can ...

javascripthtmlcss

Encountered an error with code ERR_OSSL_PEM_NO_START_LINE along with the message "routines:get_name:no start line" while trying

I ran into an issue while trying to set up react, where the installation process kept aborting. I am using node v16-14-0 and npm v6-14-11. npx creat-react-app my-app npx: installed 67 in 13.6s creating a new react app in C:\User\adminstrator&bso ...

node.jsreactjsnpmcreate-react-app

Utilizing the power of Vue 2 and NuxtJS to effortlessly customize the appearance of child components

I am currently working on a Nuxt.js project (still using Vue 2) that consists of two components. I am trying to override the child style with the parent's style, but the ::v-deep pseudo selector doesn't seem to be effective. Regardless of my eff ...

javascriptcssvue.jssassnuxt.js

The correct alignment of images is crucial for a website's overall aesthetics and functionality

My column displays images aligned in the center when viewed locally, but the alignment changes when hosted remotely. Here is the image when locally hosted: https://i.sstatic.net/I56Dg.png And here is the remote host image: https://i.sstatic.net/ePoAn.p ...

htmlcssbootstrap-4

What exactly does the "data-effect" attribute refer to?

After downloading a code, I came across the following line: <button data-effect="st-effect-4">Slide along</button> I noticed that "st-effect-4" is a class name in the code, but I am curious to know what exactly this data-effect attribute is u ...

htmlcss

NextJS 13 beta: A guide on establishing communication between the client child and parent server components

It's clear that I need to brush up on some basic concepts here. In my parentServerComponent, I'm attempting something like this: parentServerComponent.js: // some logic and data fetching happening here return ( <childClientComponent1 /&g ...

reactjsnext.js

Ways to automatically divide lists into various div elements

Hey there! I currently have a list of categories on my page that is subject to change. I'm looking for assistance in creating a loop that will divide my lists into groups of 5 items per div. For example: foreach($categories as $cat) <label> ...

phphtmlcsslaravel-blade

Pass the modified state as a parameter to another function for further processing

Whenever I input a value into the input field, it updates the state with the entered value. After that, I aim to utilize the updated state value in a function that increments this updated state value. Main Component class App extends Component{ state = ...

reactjsonchange

Can I use a custom font in an HTML5 canvas?

Has anyone had success importing a custom font for use in HTML5 canvas? I've been trying to do this by loading the font file on my computer, but all my attempts have failed so far. The canvas keeps showing the default font instead of the one I want to ...

javascriptcsshtmlfontshtml5-canvas

Arrangement of elements across rows and columns in a grid pattern

Is it possible to span a column that is equivalent to two columns in the first row and then have one column each for the second row, as shown in the screenshot? (There are two columns in the second row in this case) CSS main section { display: grid; ...

csscss-gridgrid-layout

Enhance autocomplete functionality by incorporating a left icon feature for text fields within the autocomplete component

I have a component with autocomplete functionality that displays tags Autocomplete with tags and I am trying to add a left icon, but only the right icon is functioning correctly. Current Issue When I add a left icon, it shows up but prevents the renderi ...

reactjstypescriptmaterial-ui

Leveraging React SSR with Next.js, we can utilize the `getInitialProps` method to insert a

When working on Next.js with server-side rendering in React, I encountered an issue while trying to render a page as shown below: // This common element is used in many projects through my private node_modules const Header = ({ result }) => <div> ...

javascriptreactjsnext.js

The properties of margin:auto and text-align:center are failing to function as expected

I'm facing an issue while creating a website. The 'margin: auto' and 'text-align: center' properties in my CSS code seem to not be functioning as expected. Can someone please review my code in inspect element and identify the probl ...

htmlcssmargintext-align

The transformation does not occur again when the window is resized

After seeing a question on How to make svg RTL I attempted to make my svg RTL using: transform: translate(100%, 0) scale(-1, 1); However, I noticed that when resizing my browser window, the transform is not properly applied and the line origin shifts ...

cssreactjssvg

Navigating React Router in conjunction with Node Express-routing can be a complex task,

I am currently managing a React app with React Router and a Node.js server. Here is my router setup in React: <BrowserRouter> <Switch> <PrivateRoute token={token} Component={Payments} exact path="/payments"/> <Priv ...

node.jsreactjsexpressreact-router

The NodeJS server encountered an issue while trying to load the XMLHttpRequest from the localhost. The specified link type of

When accessing the same link to a jsx file (containing ReactJS code) online, everything works fine. However, when attempting to open it on NodeJS localhost, an error occurs: "XMLHttpRequest cannot load http://.../js/r1BodyBabel.js. No 'Access-Contro ...

node.jsreactjs

Error encountered in Typescript parsing when setting EXTEND_ESLINT to true in create-react-app

Demo on GitHub - Simplified Version We are currently in the process of migrating our create-react-app project from Flow to Typescript incrementally. As part of this migration, I had to disable some ESLint rules that were causing issues. To customize ESLin ...

reactjstypescriptcreate-react-appparsing-errortypescript-eslint