Rotating Preloader with Anime.js

Developer
Sandro Walet
Size
2,450 Kb
Views
176,088
  1. Rotating Preloader with Anime.js Previews
  2. Rotating Preloader with Anime.js HTML Codes
  3. Rotating Preloader with Anime.js CSS Codes
  4. Rotating Preloader with Anime.js JS Codes

How do I make an rotating preloader with anime.js?

I came across this beauty of a design on Dribbble and just had to code it! https://dribbble.com/shots/3308544-Preloader-IV. What is a rotating preloader with anime.js? How do you make a rotating preloader with anime.js? This script and codes were developed by Sandro Walet on 12 June 2022, Sunday.

Rotating Preloader with Anime.js Previews
IQ Test

Rotating Preloader with Anime.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rotating Preloader with Anime.js</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="center"> <div class="loader blur"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Rotating Preloader with Anime.js - Script Codes CSS Codes

body { background-color: #1b1941;
}
.center { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
}
.circle { width: 50px; height: 50px; background-color: #fff; display: inline-block; border-radius: 50%; margin: 0 16.66666667px; box-shadow: 0 -5px 5px 1px rgba(0, 0, 0, 0.2);
}
.circle-1 { background-color: #ffc300; background: linear-gradient(#ff8700, #ffcf33);
}
.circle-2 { background-color: #ff004b; background: linear-gradient(#ff0039, #ff4d81);
}

Rotating Preloader with Anime.js - Script Codes JS Codes

var circle = anime ({ targets: ['.loader'], rotate: 180, duration: 1600, loop: true, elasticity: 600, easing: 'easeOutElastic', delay: function(el, index) { return index * 80; },
});
Rotating Preloader with Anime.js - Script Codes
Rotating Preloader with Anime.js - Script Codes
Home Page Home
Developer Sandro Walet
Username tamashi
Uploaded June 12, 2022
Rating 4
Size 2,450 Kb
Views 176,088
Do you need developer help for Rotating Preloader with Anime.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sandro Walet (tamashi) Script Codes
Name
Expanding Share Button
A Pen by Sandro Walet
Gooey Preloader with Anime.js
Material Inspired Panel
Bounce.js Hover Animation
Current indicator
Material inspired grid
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!