Spinner loader

Developer
Qpoziomek
Size
2,060 Kb
Views
4,048
  1. Spinner loader Previews
  2. Spinner loader HTML Codes
  3. Spinner loader CSS Codes

How do I make an spinner loader?

What is a spinner loader? How do you make a spinner loader? This script and codes were developed by Qpoziomek on 06 January 2023, Friday.

Spinner loader Previews
IQ Test

Spinner loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>spinner loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="preloader"> <div class="pozycja"> <div class="srodek"> <div class="drugi"> <div class="prawy"></div> </div> <div class="trzeci"> <div class="pierwszy"> <div class="lewy"></div> </div> </div> </div> </div>
</div>
</body>
</html>

Spinner loader - Script Codes CSS Codes

body,#preloader,.trzeci{background:#111111}
#preloader{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999}.pozycja{width:100px;height:100px;position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;-webkit-animation:obrot 10s linear infinite;animation:obrot 10s linear infinite}.srodek{width:100px;height:100px;position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;-webkit-animation:obrot 1.75s ease-in-out infinite;animation:obrot 1.75s ease-in-out infinite}.pierwszy{width:70px;height:34px;overflow:hidden;position:absolute;top:50%;left:50%;margin-top:-15px;margin-left:-35px}.lewy{width:70px;height:70px;border:none;-webkit-animation:obrotLewy 1.75s ease-in-out infinite;animation:obrotLewy 1.75s ease-in-out infinite}.drugi{width:70px;height:70px;overflow:hidden;position:absolute;top:50%;left:50%;margin-top:-35px;margin-left:-35px}.trzeci{width:72px;height:38px;position:absolute;top:50%;left:50%;margin-top:-38px;margin-left:-36px}.prawy{width:70px;height:70px;border:none;-webkit-animation:obrotPrawy 1.75s linear infinite;animation:obrotPrawy 1.75s linear infinite} @-webkit-keyframes obrotLewy{ 0%,40%{-webkit-transform:rotate(135deg);transform:rotate(135deg)} 100%{-webkit-transform:rotate(490deg);transform:rotate(490deg)} } @keyframes obrotLewy{ 0%,40%{-webkit-transform:rotate(135deg);transform:rotate(135deg)} 100%{-webkit-transform:rotate(490deg);transform:rotate(490deg)} }
@-webkit-keyframes obrotPrawy{ 0%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)} 15%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} 40%{-webkit-transform:rotate(135deg);transform:rotate(135deg)} 70%,80%{-webkit-transform:rotate(316deg);transform:rotate(316deg)} 100%{-webkit-transform:rotate(320deg);transform:rotate(320deg)} }
@keyframes obrotPrawy{ 0%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)} 15%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} 40%{-webkit-transform:rotate(135deg);transform:rotate(135deg)} 70%,80%{-webkit-transform:rotate(316deg);transform:rotate(316deg)} 100%{-webkit-transform:rotate(320deg);transform:rotate(320deg)} }
@-webkit-keyframes obrot{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)} }
@keyframes obrot{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
.lewy::before,.prawy::before{content:"";position:absolute;top:0;left:0;width:70px;height:70px;border-style:solid;border-width:6px;border-top-color:#FFF;border-right-color:#FFF;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:zmiana_koloru 6s infinite alternate;animation:zmiana_koloru 6s infinite alternate}
@-webkit-keyframes zmiana_koloru {
0%,100% { border-top-color:#fcb711;border-right-color:#fcb711 }
16% { border-top-color:#f37021;border-right-color:#f37021 }
33% { border-top-color:#cc004c;border-right-color:#cc004c }
50% { border-top-color:#6460aa;border-right-color:#6460aa }
66% { border-top-color:#0089d0;border-right-color:#0089d0 }
82% { border-top-color:#0db14b;border-right-color:#0db14b }
}
@keyframes zmiana_koloru {
0%,100% { border-top-color:#fcb711;border-right-color:#fcb711 }
16% { border-top-color:#f37021;border-right-color:#f37021 }
33% { border-top-color:#cc004c;border-right-color:#cc004c }
50% { border-top-color:#6460aa;border-right-color:#6460aa }
66% { border-top-color:#0089d0;border-right-color:#0089d0 }
82% { border-top-color:#0db14b;border-right-color:#0db14b }
}
Spinner loader - Script Codes
Spinner loader - Script Codes
Home Page Home
Developer Qpoziomek
Username poziomq
Uploaded January 06, 2023
Rating 3
Size 2,060 Kb
Views 4,048
Do you need developer help for Spinner loader?

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!

Qpoziomek (poziomq) Script Codes
Name
Simple Pacman loader
Daily Postage 069 - Minions
Gratitude Logo
Qpassword
Tancerzyk css
Sleeping mask 5 css
Tancerka css
PoziomQ
Dancer css
Lost in the tech css version
Create amazing captions 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!