Loader spiner

Developer
Alex Konstantinov
Size
1,983 Kb
Views
26,312
  1. Loader spiner Previews
  2. Loader spiner HTML Codes
  3. Loader spiner CSS Codes

How do I make an loader spiner?

Loader spiner. What is a loader spiner? How do you make a loader spiner? This script and codes were developed by Alex Konstantinov on 08 September 2022, Thursday.

Loader spiner Previews
IQ Test

Loader spiner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>loader spiner</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="loader">	<div class="item-1"><span></span></div>	<div class="item-2"><span></span></div>	<div class="item-3"><span></span></div>	<div class="item-4"><span></span></div>	<div class="item-5"><span></span></div>	<div class="item-6"><span></span></div>	<div class="item-7"><span></span></div>	<div class="item-8"><span></span></div>	</div>
</body>
</html>

Loader spiner - Script Codes CSS Codes

.loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%;	background: -webkit-radial-gradient(center ellipse, rgba(245,247,250,1) 0%, rgba(230,233,237,1) 100%);	background: radial-gradient(ellipse at center, rgba(245,247,250,1) 0%, rgba(230,233,237,1) 100%); z-index: 2; font-size: 32px;
}
.loader div { position: absolute; top: 50%; left: 50%; will-change: transform;
}
.loader div span { display: block; width: 0.5em; height: 0.15em; background: black; border-radius: 0.08em;
}
.loader .item-1 { margin-left: 11.313708496px; margin-top: -11.313708496px; -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.loader .item-1 span { -webkit-transform: rotate(45deg) translateZ(0); transform: rotate(45deg) translateZ(0);
}
.loader .item-2 { margin-left: 0px; margin-top: -16px; -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.loader .item-2 span { -webkit-transform: rotate(180deg) translateZ(0); transform: rotate(180deg) translateZ(0);
}
.loader .item-3 { margin-left: -11.313708496px; margin-top: -11.313708496px; -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.loader .item-3 span { -webkit-transform: rotate(135deg) translateZ(0); transform: rotate(135deg) translateZ(0);
}
.loader .item-4 { margin-left: -16px; margin-top: 0px; -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.loader .item-4 span { -webkit-transform: rotate(270deg) translateZ(0); transform: rotate(270deg) translateZ(0);
}
.loader .item-5 { margin-left: -11.313708496px; margin-top: 11.313708496px; -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.loader .item-5 span { -webkit-transform: rotate(225deg) translateZ(0); transform: rotate(225deg) translateZ(0);
}
.loader .item-6 { margin-left: 0px; margin-top: 16px; -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.loader .item-6 span { -webkit-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0);
}
.loader .item-7 { margin-left: 11.313708496px; margin-top: 11.313708496px; -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.loader .item-7 span { -webkit-transform: rotate(315deg) translateZ(0); transform: rotate(315deg) translateZ(0);
}
.loader .item-8 { margin-left: 16px; margin-top: 0px; -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
.loader .item-8 span { -webkit-transform: rotate(450deg) translateZ(0); transform: rotate(450deg) translateZ(0);
}
@-webkit-keyframes spin_full { 0% { -webkit-transform: rotate(0deg) translateZ(0); transform: rotate(0deg) translateZ(0); } 100% { -webkit-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0); }
}
@keyframes spin_full { 0% { -webkit-transform: rotate(0deg) translateZ(0); transform: rotate(0deg) translateZ(0); } 100% { -webkit-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0); }
}
Loader spiner - Script Codes
Loader spiner - Script Codes
Home Page Home
Developer Alex Konstantinov
Username oxla
Uploaded September 08, 2022
Rating 4
Size 1,983 Kb
Views 26,312
Do you need developer help for Loader spiner?

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!

Alex Konstantinov (oxla) Script Codes
Name
Loader
Burger menu
Pirate pixel art css
Combined font-size and line-height lock, using pixel-based Media Queries
Cube Rotating Around
Drag resize rotate
Web Launch Checklist
A Pen by Alex Konstantinov
Loader wave
Iphone 5
Create amazing sales emails 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!