Rotating rainbow preloader

Developer
Size
3,043 Kb
Views
16,192
  1. Rotating rainbow preloader Previews
  2. Rotating rainbow preloader HTML Codes
  3. Rotating rainbow preloader CSS Codes

How do I make an rotating rainbow preloader?

A little preloader that creates beautiful rainbow effect. What is a rotating rainbow preloader? How do you make a rotating rainbow preloader? This script and codes were developed by on 12 January 2023, Thursday.

Rotating rainbow preloader Previews
IQ Test

Rotating rainbow preloader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>rotating rainbow preloader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="logo">W</div>
</div>
<div class="tagline">W is for wubba lubba dub dub</div>
</body>
</html>

Rotating rainbow preloader - Script Codes CSS Codes

@import url(//fonts.googleapis.com/css?family=Bungee);
body { margin: 0; background: #222; overflow: hidden;
}
.container { position: fixed; left: 45vw; top: calc(50vh - 5vw); width: 140vw; height: 10vw;
}
@keyframes rotate { 0% { transform: rotate(0deg); filter: hue-rotate(360deg); } 50% { transform: rotate(360deg); filter: hue-rotate(0deg); } 100% { transform: rotate(360deg); filter: hue-rotate(0deg); }
}
@keyframes logoan { 0% { filter: hue-rotate(360deg); } /* 50% { filter: hue-rotate(0deg); } */ 100% { filter: hue-rotate(0deg); }
}
.petal { width: 10vw; height: 10vw; position: absolute; background: rgba(123, 191, 64, 0.36); border-style: solid; border-color: rgba(123, 191, 64, 0.5); animation-name: rotate; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-in-out; mix-blend-mode: screen; border-radius: 90% 90% 90% 0;
}
.tagline { width: 50vw; left: -5vw; text-align: center; position: fixed; line-height: 100vh; font-size: 2vw; font-family: 'Bungee'; color: rgba(123, 191, 63, 0.6); animation-name: logoan; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-in-out;
}
.logo { width: 10vw; height: 10vw; position: absolute; vertical-align: middle; line-height: 10vw; align-items: center; font-size: 6vw; font-family: 'Bungee'; text-align: center; border-radius: 90% 90% 90% 90%; border-style: solid; border-color: rgba(123, 191, 63, 0); color: rgba(123, 191, 63, 0.6); animation-name: logoan; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-in-out;
}
.petal:nth-child(0) { animation-delay: 0ms;
}
.petal:nth-child(1) { animation-delay: 100ms;
}
.petal:nth-child(2) { animation-delay: 200ms;
}
.petal:nth-child(3) { animation-delay: 300ms;
}
.petal:nth-child(4) { animation-delay: 400ms;
}
.petal:nth-child(5) { animation-delay: 500ms;
}
.petal:nth-child(6) { animation-delay: 600ms;
}
.petal:nth-child(7) { animation-delay: 700ms;
}
.petal:nth-child(8) { animation-delay: 800ms;
}
.petal:nth-child(9) { animation-delay: 900ms;
}
.petal:nth-child(10) { animation-delay: 1000ms;
}
.petal:nth-child(11) { animation-delay: 1100ms;
}
.petal:nth-child(12) { animation-delay: 1200ms;
}
.petal:nth-child(13) { animation-delay: 1300ms;
}
.petal:nth-child(14) { animation-delay: 1400ms;
}
.petal:nth-child(15) { animation-delay: 1500ms;
}
.petal:nth-child(16) { animation-delay: 1600ms;
}
.petal:nth-child(17) { animation-delay: 1700ms;
}
.petal:nth-child(18) { animation-delay: 1800ms;
}
.petal:nth-child(19) { animation-delay: 1900ms;
}
Rotating rainbow preloader - Script Codes
Rotating rainbow preloader - Script Codes
Home Page Home
Developer
Username oneplusuniverse
Uploaded January 12, 2023
Rating 4.5
Size 3,043 Kb
Views 16,192
Do you need developer help for Rotating rainbow preloader?

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!

(oneplusuniverse) Script Codes
Name
Angular attempts
Ambitheater
Custom Context Menu With Toasts
AlbumFront
AlbumBack
Slow laggy attempt
Vkapi
KYIVSTONER_KEYPAD
Audio Drumpad Sampler
Simple toggle
Create amazing video scripts 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!