Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
How to make a morph spinner animation using CSS ?
Next article icon

How to Rotate Shape Loader Animation using CSS ?

Last Updated : 17 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

A rotating shape loader animation in CSS refers to an animated element, such as a circle or square, that spins continuously to indicate loading or processing. This is achieved using the @keyframes rule and CSS properties like transform: rotate() to create smooth, spinning animations.

rotate shape loader animation Preview:

Rotating-shape-loader-animation
rotating shape loader animation

Creating rotating shape loader animation

  • HTML Structure: It contains a title, heading, and a loader with three .box divs inside a .loader container.
  • Centering Loader: The body uses display: grid and place-items: center to center content vertically and horizontally.
  • Loader Design: The .loader uses display: flex with a gap property to evenly space the .box elements.
  • Rotation Animation: The .box divs use @keyframes rotate to animate a 180-degree rotation continuously every 3 seconds.
  • Gradient and Delay: Each box has a linear gradient change mid-animation and uses animation delay to create staggered starts.

Example

HTML 
<!DOCTYPE html> <html>  <head>     <style>         body {             display: grid;             place-items: center;         }          .loader {             display: flex;             gap: 0.6rem;         }          .box {             width: 50px;             height: 50px;             background: #0043bc;             animation: rotate 3s infinite;         }          .box:nth-child(2) {             animation-delay: 0.25s;         }          .box:nth-child(3) {             animation-delay: 0.5s;         }          @keyframes rotate {             50% {                 transform: rotate(180deg);                 background: rgb(0, 112, 255);                 background: linear-gradient(90deg,                         rgba(0, 112, 255, 1) 45%,                         rgba(0, 67, 188, 1) 100%);             }         }     </style> </head>  <body>     <h1 style="color:green">         GeeksforGeeks     </h1>     <h2 style="color:green">         Minimal shape rotating Loader     </h2>     <div class="loader">         <div class="box"></div>         <div class="box"></div>         <div class="box"></div>     </div> </body>  </html>

Output:


Next Article
How to make a morph spinner animation using CSS ?

S
satyamm09
Improve
Article Tags :
  • Technical Scripter
  • Web Technologies
  • CSS
  • Technical Scripter 2022
  • CSS-Questions

Similar Reads

  • How to make a morph spinner animation using CSS ?
    Morphing is the rotating animation of certain objects changing their shape. The changing of shape is called morphing. In this article, we will make a morph spinner that will act as a loading animation by using CSS. This method can also be used to make eye-catching card backgrounds, banners, buttons,
    3 min read
  • How to make smooth bounce animation using CSS ?
    The smooth bounce animation can be done with the help of HTML and CSS. It will generate fun and desired outputs. For this project, a simple div with class ball is needed in HTML page: [GFGTABS] CSS <div class="ball"></div> [/GFGTABS]We will switch to CSS for animation programmi
    4 min read
  • How to shake an image using CSS Keyframe ?
    In this article, we will see how to shake an image using CSS Keyframe, along with knowing the different properties used to shake the image, through the code example. A shaking image or shivering effect on the image is used to make the website look more dynamic and attractive. This effect can be appl
    2 min read
  • How to create Candle Animation using CSS ?
    To create Candle animation, we take the basic approach of Pure CSS., Here we are using some animation techniques like move and rotate to create the Candle more effectively. Approach: First we create a container class. In container class, we create another class named candle-body and in this class, w
    3 min read
  • How to Create Border Animation using CSS?
    Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction.
    2 min read
  • How to Create Animation Loading Bar using CSS ?
    Loading Bar with animation can be created using HTML and CSS. We will create a Loader that is the part of an operating system that is responsible for loading programs and libraries. The progress bar is a graphical control element used to visualize the progression of an extended computer operation, s
    3 min read
  • How to Design Fade balls loader Animation using CSS ?
    Minimal Fading balls loader is a basic CSS animation, where the loader animation will be utilized to engage the user until when a specific page or content is fully get loaded in a particular platform. In this article, we will see how to create a loader animation with three balls animation effect whi
    2 min read
  • Loading Text Animation Effect using CSS
    There are a lot of animations possible in CSS and today we will look at the loading text animation. The basic idea behind the working of this animation is the application of animation delay. Every alphabet is delayed by .1s so that each alphabet animates with a little delay and give the loading anim
    3 min read
  • How to Rotate Container Background Image using CSS ?
    Rotating a container's background image using CSS involves applying the transform: rotate() property to the container element. This rotates the entire element at a specified angle, including its background image, creating a dynamic, rotating visual effect on the web page's design. Approach: Using tr
    2 min read
  • Create Scanning Animation Loader using HTML & CSS
    In this article, we will learn how to create a Scanning Animation. This can be used to add interactivity to the loader page. This is approached by simple HTML & CSS.  Glimpse of the Project: Approach: We will first create an HTML file in which we are going to add a div for adding a span in it.We
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences