CSS spinning loader

Developer
Alexander Nastase
Size
2,244 Kb
Views
44,528
  1. CSS spinning loader Previews
  2. CSS spinning loader HTML Codes
  3. CSS spinning loader CSS Codes

How do I make an css spinning loader?

Spin, spin, spin!. What is a css spinning loader? How do you make a css spinning loader? This script and codes were developed by Alexander Nastase on 21 August 2022, Sunday.

CSS spinning loader Previews
IQ Test

CSS spinning loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS spinning loader</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html {	font: 100%/1.5 Lato, Helvetica Neue, Helvetica, Arial, sans-serif;	-webkit-font-smoothing: antialiased;	min-height: 100%;	text-align: center;	position: relative;
}
.loader {	display: block;	width: 10px;	height: 10px;	position: relative;	border: 3px solid #999;	border-radius: 100%;	animation: spin 1s infinite linear; }	.loader:after {	content:'';	width: 0;	height: 0;	display: block;	position: absolute;	top: -5px;	right: -4px;	border: 4px solid #fff;	border-left-color: #999;	}
@keyframes spin {	to { transform: rotate(360deg); }
}
/* Demo styles */
.demo {	position: absolute;	top: 50%;	left: 50%;	margin: -8px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <i class="loader demo"></i>
</body>
</html>

CSS spinning loader - Script Codes CSS Codes

html {	font: 100%/1.5 Lato, Helvetica Neue, Helvetica, Arial, sans-serif;	-webkit-font-smoothing: antialiased;	min-height: 100%;	text-align: center;	position: relative;
}
.loader {	display: block;	width: 10px;	height: 10px;	position: relative;	border: 3px solid #999;	border-radius: 100%;	animation: spin 1s infinite linear; }	.loader:after {	content:'';	width: 0;	height: 0;	display: block;	position: absolute;	top: -5px;	right: -4px;	border: 4px solid #fff;	border-left-color: #999;	}
@keyframes spin {	to { transform: rotate(360deg); }
}
/* Demo styles */
.demo {	position: absolute;	top: 50%;	left: 50%;	margin: -8px;
}
CSS spinning loader - Script Codes
CSS spinning loader - Script Codes
Home Page Home
Developer Alexander Nastase
Username anodpixels
Uploaded August 21, 2022
Rating 3
Size 2,244 Kb
Views 44,528
Do you need developer help for CSS spinning 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!

Alexander Nastase (anodpixels) Script Codes
Name
Target effect
Carousel_listing
MaintenanceFastPage
Target effects
Scrollbar Scrolling Progress Annotation
Right Click Menu
Simple Tabs
CSS CREATURE
A Pen by Alexander Nastase
Pressable CSS Buttons
Create amazing marketing copy 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!