Rainbow Preloader with Offset-Path

Developer
Rachel McGrane
Size
2,721 Kb
Views
28,336
  1. Rainbow Preloader with Offset-Path Previews
  2. Rainbow Preloader with Offset-Path HTML Codes
  3. Rainbow Preloader with Offset-Path CSS Codes

How do I make an rainbow preloader with offset-path?

Only supported in Chrome! Here's where I learned about offset-path http://usefulangle.com/post/33/moving-element-in-circular-path-with-css-offset-path. What is a rainbow preloader with offset-path? How do you make a rainbow preloader with offset-path? This script and codes were developed by Rachel McGrane on 12 September 2022, Monday.

Rainbow Preloader with Offset-Path Previews
IQ Test

Rainbow Preloader with Offset-Path - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rainbow Preloader with Offset-Path</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <div class='circle circle-1'></div> <div class='circle circle-2'></div> <div class='circle circle-3'></div> <div class='circle circle-4'></div>
</div>
</body>
</html>

Rainbow Preloader with Offset-Path - Script Codes CSS Codes

body, html { height: 100%; background: #F6F4EE;
}
.container { display: flex; align-items: center; justify-content: center; height: 100%;
}
.circle { width: 40px; height: 40px; background: red; border-radius: 50%; offset-path: path("M0,0a72.5,72.5 0 1,0 145,0a72.5,72.5 0 1,0 -145,0"); offset-rotate: 0deg; position: relative; transform: scale(1.5);
}
.circle-1 { width: 30px; height: 30px; background: #814AB1;
}
.circle-2 { width: 25px; height: 25px; background: #4CBDC9; left: -30px;
}
.circle-3 { width: 20px; height: 20px; background: #FFCE24; left: -55px;
}
.circle-4 { width: 15px; height: 15px; background: #FF2D74; left: -75px;
}
.circle-1 { animation: load 1.8s cubic-bezier(0.86, 0, 0.07, 1) infinite; animation-delay: 0.147s; animation-fill-mode: forwards; z-index: 99;
}
.circle-2 { animation: load 1.8s cubic-bezier(0.86, 0, 0.07, 1) infinite; animation-delay: 0.294s; animation-fill-mode: forwards; z-index: 98;
}
.circle-3 { animation: load 1.8s cubic-bezier(0.86, 0, 0.07, 1) infinite; animation-delay: 0.441s; animation-fill-mode: forwards; z-index: 97;
}
.circle-4 { animation: load 1.8s cubic-bezier(0.86, 0, 0.07, 1) infinite; animation-delay: 0.588s; animation-fill-mode: forwards; z-index: 96;
}
@keyframes load { from { offset-distance: 0; } to { offset-distance: 100%; }
}
Rainbow Preloader with Offset-Path - Script Codes
Rainbow Preloader with Offset-Path - Script Codes
Home Page Home
Developer Rachel McGrane
Username rachelmcgrane
Uploaded September 12, 2022
Rating 4.5
Size 2,721 Kb
Views 28,336
Do you need developer help for Rainbow Preloader with Offset-Path?

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!

Rachel McGrane (rachelmcgrane) Script Codes
Name
Wireframe Concept
A Pen by Rachel McGrane
Site Header
Audio Player WIP
SVG Audio Wave Loader
Ship Name Lookup
Pride Flags
Gmail Icon Animation
Data Input Form
Bumble Coming Soon Page
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!