I'm trying to apply animation on mouseover event (works fine) and the same animation with reverse and backwards properties, to play it back on mouseleave. But the second part doesn't work properly. Finally i want the animation plays forward on mouseover and backward on mouseleave. And if there is a way to apply next animation from that point, where the previous was stopped, please, include it in your answer. Here is my code:
const target = document.getElementById("animated");
target.addEventListener("mouseover", animateForward);
target.addEventListener("mouseout", animateBackward);
function animateForward() {
target.style.animation = 'custom 1.6s forwards';
}
function animateBackward() {
target.style.animation = 'custom 1.6s reverse backwards';
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes custom {
25% {
border-radius: 50% 0 0 0;
}
50% {
border-radius: 50% 50% 0 0;
}
75% {
border-radius: 50% 50% 50% 0;
}
100% {
border-radius: 50% 50% 50% 50%;
background-color: violet;
}
}
/* Standard syntax */
#keyframes custom {
25% {
border-radius: 50% 0 0 0;
}
50% {
border-radius: 50% 50% 0 0;
}
75% {
border-radius: 50% 50% 50% 0;
}
100% {
border-radius: 50% 50% 50% 50%;
background-color: violet;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
div {
border: 1px black solid;
width: 100px;
height: 100px;
margin: 50px;
}
<div id="animated"></div>
And here is JsFiddle.
For a CSS only solution, leave the #keyframes, and use transitions instead. When dealing with :hover, transitions are almost always what you really need.
E.g, all the properties of your animation can be set independently, and thus they can have their own transition rules.
So your animation could be converted by the following transition, where each keyframe has been replaced by a trio transition-property-transtion-duration-transition-delay.
div {
border: 1px black solid;
width: 100px;
height: 100px;
margin: 50px;
/* define all the props */
transition-property:
transform,
background-color,
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius;
/* set their duration independently */
transition-duration: 1.6s, 1.6s, 0.4s, 0.4s, 0.4s, 0.4s;
/* same for delays */
transition-delay: 0s, 0s, 0s, 0.4s, 0.8s, 1.2s;
}
div:hover{
border-radius: 50%;
background-color: violet;
transform: rotate(180deg);
}
<div id="animated"></div>
You need to play with the animation-iteration-count in order to fix this:
const target = document.getElementById("animated");
target.addEventListener("mouseover", animateForward);
target.addEventListener("mouseout", animateBackward);
function animateForward() {
target.style.animation = '';
setTimeout(function() {
target.style.animation = 'custom 1.6s forwards';
target.style.animationIterationCount = '1';
}, 0)
}
function animateBackward() {
target.style.animation = 'custom 1.6s reverse backwards';
target.style.animationIterationCount = '2';
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes custom {
25% {
border-radius: 50% 0 0 0;
}
50% {
border-radius: 50% 50% 0 0;
}
75% {
border-radius: 50% 50% 50% 0;
}
100% {
border-radius: 50% 50% 50% 50%;
background-color: violet;
}
}
/* Standard syntax */
#keyframes custom {
25% {
border-radius: 50% 0 0 0;
}
50% {
border-radius: 50% 50% 0 0;
}
75% {
border-radius: 50% 50% 50% 0;
}
100% {
border-radius: 50% 50% 50% 50%;
background-color: violet;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
div {
border: 1px black solid;
width: 100px;
height: 100px;
margin: 50px;
}
<div id="animated"></div>
Related
i am trying to create animated background slideshow that zoom in the first image and then come back to normal for the next image and zoom it, any ideas please ??
.img-contaner {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
animation: img 20s ease-in-out infinite;
background: url(./1.jpg);
}
#keyframes img{
25%{
background: url(./2.jpg);
transform: scale(1.2);
}
50%{
background: url(./3.jpg);
transform: scale(1.2);
}
75%{
background: url(./4.jpg);
transform: scale(1.2);
}
100%{
background: url(./1.jpg);
transform: scale(1.2);
}
}
i tried this but the image stays zoomed the whole animation
Don't override the background-image using the background: shorthand. You'll override the other background-* styles.
Preload all your images into the browser to prevent flickering using a :before pseudo
It's "container" not "contaner"
Math time:
4 images + 4 transitions + 4 pauses = 12. 100 / 12 = 8.3 Calculate incrementally and floor or round your value to be used as animation keyframes steps:
/*QuickReset*/*{margin:0;box-sizing:border-box;}
.img-container {
position: fixed;
width: 100%;
height: 100%;
background: center / cover no-repeat;
animation: img 20s ease-in-out infinite;
}
/* Preload images to prevent flicker during animation */
.img-container:before {
content: "";
background-image:
url(//placehold.it/500x300/0bf?text=1),
url(//placehold.it/500x300/f0b?text=2),
url(//placehold.it/500x300/bf0?text=3),
url(//placehold.it/500x300/0fb?text=4);
}
#keyframes img {
0%, 8% {
background-image: url(//placehold.it/500x300/0bf?text=1);
transform: scale(1);
}
17% {
transform: scale(1.2);
}
25%, 33% {
background-image: url(//placehold.it/500x300/f0b?text=2);
transform: scale(1);
}
41% {
transform: scale(1.2);
}
50%, 58% {
background-image: url(//placehold.it/500x300/bf0?text=3);
transform: scale(1);
}
66% {
transform: scale(1.2);
}
75%, 83% {
background-image: url(//placehold.it/500x300/0fb?text=4);
transform: scale(1);
}
91% {
transform: scale(1.2);
}
}
<div class="img-container"></div>
I have 2 words that I am trying to animate on the click of a button, it does this by adding a class to the div's. But I can only get it to do it every other button press, I would like it to play every time I press the button.
function animateWords() {
word1.classList.add('puffIn');
word2.classList.add('vanishIn');
}
I have tried removing the classes first but that doesn't work, the only way I can get it to do every other time is by doing an if statement that checks if the classList contains the classes and removes them if not it adds them. But this only works every other time.
Any help would be great
Cheers
this might be a solution to your question/problem.
I have added some styling to the words so the animation will be better visible. The removing of the class is done by a timeout function (so don't need to use an if statement).
function animateWords() {
let word1 = document.getElementById('word1');
let word2 = document.getElementById('word2');
word1.classList.add('puffIn');
word2.classList.add('vanishIn');
var wait = window.setTimeout(function() {
word1.classList.remove('puffIn');
word2.classList.remove('vanishIn');
}, 1500);
}
p {
display: block;
float: left;
padding: 1px;
background: #5c5c5c;
border: 2px solid #f6f6f6;
color: #f6f6f6;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.wordsAnimation {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.puffIn {
-webkit-animation-name: puffIn;
animation-name: puffIn;
}
.vanishIn {
-webkit-animation-name: vanishIn;
animation-name: vanishIn;
}
#-webkit-keyframes puffIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(2, 2);
-webkit-filter: blur(2px);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
}
#keyframes puffIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(2px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
#-webkit-keyframes vanishIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(2, 2);
-webkit-filter: blur(90px);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
}
#keyframes vanishIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
-webkit-filter: blur(90px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
-webkit-filter: blur(0px);
}
}
<p id="word1" class="wordsAnimation">Puff in</p>
<p id="word2" class="wordsAnimation">Vanish in</p>
<button onclick="animateWords()"> Animate </button>
function myFunction(){
let x=document.getElementById('question-header')
if(x.classList.contains('redclass')){
x.classList.remove('redclass')
x.classList.add('blueclass')
}else {
x.classList.remove('blueclass')
x.classList.add('redclass')
}
}
.redclass{
background: red;
}
.blueclass{
background: orange;
}
<div id="question-header">
<h1 itemprop="name" class="">Adding and removing classes on click of a button to animate divs</h1>
</div>
<button onclick="myFunction()">animate me</button>
Here is a IMHO bizarre answer. I'm expanding upon #tmach's answer, but instead of using a setTimeout to remove the classes, I'm forcing a DOM reflow. Now you can press the animate button to restart the animation while it animates.
function animateWords() {
let word1 = document.getElementById('word1');
let word2 = document.getElementById('word2');
word1.classList.remove('puffIn');
word2.classList.remove('vanishIn');
word1.offsetWidth; /* Magic! (forced reflow) */
word1.classList.add('puffIn');
word2.classList.add('vanishIn');
}
p {
display: block;
float: left;
padding: 1px;
background: #5c5c5c;
border: 2px solid #f6f6f6;
color: #f6f6f6;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.wordsAnimation {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.puffIn {
-webkit-animation-name: puffIn;
animation-name: puffIn;
}
.vanishIn {
-webkit-animation-name: vanishIn;
animation-name: vanishIn;
}
#-webkit-keyframes puffIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(2, 2);
-webkit-filter: blur(2px);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
}
#keyframes puffIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(2px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
#-webkit-keyframes vanishIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(2, 2);
-webkit-filter: blur(90px);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
}
#keyframes vanishIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
-webkit-filter: blur(90px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
-webkit-filter: blur(0px);
}
}
<p id="word1" class="wordsAnimation">Puff in</p>
<p id="word2" class="wordsAnimation">Vanish in</p>
<button onclick="animateWords()"> Animate </button>
I'm trying to get the background colour of the page to change on the gradient between black and white as the user scrolls. The colour will depend on where the user is currently scrolled to on the page if that makes sense? Here's some code I have already however the only problem with it is that when the user hasn't scrolled anywhere the webpage is not black.
function scroll(){
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
var color = Math.round(((body.scrollTop + html.offsetHeight) / height) * 255);
body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}
html{
height: 100%;
}
body{
height: 200%;
background: rgb(126,126,126);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body onscroll="scroll()">
<script src="assets/JS/ScrollEffect.js"></script>
</body>
</html>
Something like this?
$(window).on('scroll', function(){
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
var scrolledArea = (s / (d - c));
$("div").css("opacity", scrolledArea);
})
body{
margin: 0;
}
div{
height: 500vh;
background: #000;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
You have to use html.scrollTop instead of body.scrollTop.
That's because the html element becomes scrollable. The body element with 200% height overflows html with 100% height, which is the viewport height.
Body does not scroll here, so you always get body.scrollTop = 0.
But html does scroll, so you have to use html.scrollTop.
The elements body and html sometimes act as if they are one element. That's the case for scrolling behaviour. But sometimes they act as if they are two separate elements. That's the cases in styling with CSS.
To get from black to white (not grey to white), you have to change var height = html.scrollHeight - html.clientHeight; and var color = Math.round((html.scrollTop / height) * 255);
To make it work in IE you need to add:
<html onscroll="scroll()">
If you can, you should use jquery though (like Kushtrim suggested).
function scroll(){
var body = document.body,
html = document.documentElement;
var height = html.scrollHeight - html.clientHeight;
var color = Math.round((html.scrollTop / height) * 255);
body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}
html{
height: 100%;
}
body{
height: 200%;
background: rgb(0,0,0);
}
<!DOCTYPE html>
<html lang="en" dir="ltr" onscroll="scroll()">
<body onscroll="scroll()">
<script src="assets/JS/ScrollEffect.js"></script>
</body>
</html>
Try it, read more here
.container {
width: 100%;
min-width: 1200px;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.container .overlay {
background: linear-gradient(to bottom, rgba(0, 160, 227, 0.5) 0%, rgba(176, 203, 31, 0.5) 50%, rgba(239, 127, 26, 0.5) 100%);
}
.container .slide {
width: 100%;
height: 600px;
position: relative;
}
.secs {
position: relative;
height: 100%;
}
.secs .inside {
width: 1200px;
margin: 0 auto;
height: 100%;
}
.secs.first {
text-align: center;
}
.secs.first h1 {
font-size: 60px;
font-weight: bold;
color: white;
position: absolute;
top: 50%;
left: 50%;
text-shadow: 1px 1px 1px #999,2px 2px 1px #999,3px 3px 1px #999,4px 4px 1px #999;
transform: translate(-50%, -155%);
z-index: 10;
}
.secs.first .inside {
display: flex;
justify-content: center;
padding-top: 100px;
position: relative;
}
.secs.first .bar {
width: 80px;
height: 350px;
opacity: 0.54;
box-shadow: 0px 0px 50px #fff;
display: inline-block;
margin-right: 25px;
background: #fff;
}
.secs.first .bar:nth-child(1) {
background: #00a0e3;
animation: bars 5s infinite;
}
.secs.first .bar:nth-child(2) {
transform: translateY(130px);
background: #00a0e3;
animation: bars1 5s infinite;
}
.secs.first .bar:nth-child(3) {
transform: translateY(30px);
background: #b0cb1f;
animation: bars2 5s infinite;
}
.secs.first .bar:nth-child(4) {
transform: translateY(80px);
background: #b0cb1f;
animation: bars3 5s infinite;
}
.secs.first .bar:nth-child(5) {
transform: translateY(-30px);
background: #ef7f1a;
animation: bars4 5s infinite;
}
.secs.first .bar:nth-child(6) {
transform: translateY(135px);
background: #ef7f1a;
animation: bars5 5s infinite;
}
.secs.first .bar:nth-child(7) {
transform: translateY(55px);
background: #e31e24;
animation: bars6 5s infinite;
}
.secs.first .bar:nth-child(8) {
background: #e31e24;
animation: bars7 5s infinite;
}
#keyframes bars {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(130px);
}
100% {
transform: translateY(0px);
}
}
#keyframes bars1 {
0% {
transform: translateY(130px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(130px);
}
}
#keyframes bars2 {
0% {
transform: translateY(30px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(30px);
}
}
#keyframes bars3 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(80px);
}
100% {
transform: translateY(0px);
}
}
#keyframes bars4 {
0% {
transform: translateY(-30px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(-30px);
}
}
#keyframes bars5 {
0% {
transform: translateY(135px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(135px);
}
}
#keyframes bars6 {
0% {
transform: translateY(55px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(55px);
}
}
#keyframes bars7 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(120px);
}
100% {
transform: translateY(0px);
}
}
<div class='container'>
<div class='overlay'>
<div class='slide secs first'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
</div>
</div>
All works properly, but I want to show a spinner loading instead of text. This is my code in Page.js.coffee:
jQuery ->
if $('.pagination').length
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
$('.pagination').text("Fetching more...")
$.getScript(url)
$(window).scroll().
This line show the text:
$('.pagination').text("Fetching more...")
Thank you guys.
Perhaps css #keyframes suits just fine for your case, you can check possible implementation here https://projects.lukehaas.me/css-loaders/
for example you can take
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
}
.loader {
color: #ffffff;
font-size: 11px;
text-indent: -99999em;
margin: 55px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before,
.loader:after {
position: absolute;
content: '';
}
.loader:before {
width: 5.2em;
height: 10.2em;
background: #0dc5c1;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.loader:after {
width: 5.2em;
height: 10.2em;
background: #0dc5c1;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
#-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
and then in your coffescript just add and remove the class "loader" loading div, or add/remove div with such a class.
<div class="loader">Loading...</div>
I need to create a loading spinner, at the moment I am using the following code.
I would like to know if is possible to rewrite it using an alternative syntax for keyframes (maybe transitions?).
Unfortunately I am using a build tool which rewrite keyframes properties adding bugs and the CSS generated is not working so I would like to work around the problem.
A JS solution is also possible, adding CSS inline.
.loadingSpinner {
width: 50px;
height: 50px;
border: 5px solid #3498db;
border-top-color: rgba(0, 0, 0, 0);
border-left-color: rgba(0, 0, 0, 0);
border-radius: 50%;
-moz-animation: loadingSpinner 0.7s infinite linear;
-o-animation: loadingSpinner 0.7s infinite linear;
-webkit-animation: loadingSpinner 0.7s infinite linear;
animation: loadingSpinner 0.7s infinite linear;
}
#-moz-keyframes loadingSpinner {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes loadingSpinner {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
#-webkit-keyframes loadingSpinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes loadingSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loadingSpinner"></div>
You could use a very long transition and trigger it with a quick js line.
For example, add a .start class that triggers a 60 second transition that rotates the spinner several times (for example, 36000deg).
.loadingSpinner {
width: 50px;
height: 50px;
border: 5px solid #3498db;
border-top-color: rgba(0, 0, 0, 0);
border-left-color: rgba(0, 0, 0, 0);
border-radius: 50%;
transform: rotate(0deg);
transition: transform 60s;
}
.loadingSpinner.start {
transform: rotate(36000deg);
}
Example: https://jsfiddle.net/6tkf1f95/1/
what about only css solution?
#keyframes spinner {
to {transform: rotate(360deg);}
}
#-webkit-keyframes spinner {
to {-webkit-transform: rotate(360deg);}
}
.spinner {
min-width: 30px;
min-height: 30px;
}
.spinner:before {
content: 'Loading…';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -13px;
margin-left: -13px;
}
.spinner:not(:required):before {
content: '';
border-radius: 50%;
border: 5px solid #ccc;
border-top-color: #03ade0;
animation: spinner .7s linear infinite;
-webkit-animation: spinner .7s linear infinite;
}
<div class="spinner"></div>
You can create an infinite CSS transition using a single CSS Custom Property, the value of which you can update every time the JavaScript transitionend event fires.
In the CSS stylesheet, we can start with the following transform and transition:
transform: var(--rotation);
transition: transform 0.7s linear;
We will need to initialise --rotation, so we can do that at the top of the stylesheet:
:root {
--rotation: rotate(0deg);
}
So far, so good. Now we need a JS function which moves the rotation value up by 360deg every time the transition completes:
const rotateSpinner = () => {
let loadingSpinnerStyles = window.getComputedStyle(loadingSpinner);
let rotation = loadingSpinnerStyles.getPropertyValue('--rotation');
rotation = parseInt(rotation.replace('rotate(', '').replace('deg)', '')) + 360;
rotation = 'rotate(' + rotation + 'deg)';
loadingSpinner.style.setProperty('--rotation', rotation);
}
When we put everything together, we get the working example below.
Working Example:
const loadingSpinner = document.querySelector('.loadingSpinner');
const rotateSpinner = () => {
let loadingSpinnerStyles = window.getComputedStyle(loadingSpinner);
let rotation = loadingSpinnerStyles.getPropertyValue('--rotation');
rotation = parseInt(rotation.replace('rotate(', '').replace('deg)', '')) + 360;
rotation = 'rotate(' + rotation + 'deg)';
loadingSpinner.style.setProperty('--rotation', rotation);
}
loadingSpinner.addEventListener('transitionend', rotateSpinner);
window.addEventListener('load', rotateSpinner);
:root {
--rotation: rotate(0deg);
}
.loadingSpinner {
width: 50px;
height: 50px;
border: 5px solid #3498db;
border-top-color: rgba(0, 0, 0, 0);
border-left-color: rgba(0, 0, 0, 0);
border-radius: 50%;
transform: var(--rotation);
transition: transform 0.7s linear;
}
<div class="loadingSpinner"></div>