Simple spinner

Developer
Niels Oeltjen
Size
1,810 Kb
Views
36,432
  1. Simple spinner Previews
  2. Simple spinner HTML Codes
  3. Simple spinner CSS Codes

How do I make an simple spinner?

Another simple spinner / loader. Saw a lot of these that were just over-complicated so I made this. What is a simple spinner? How do you make a simple spinner? This script and codes were developed by Niels Oeltjen on 08 September 2022, Thursday.

Simple spinner Previews
IQ Test

Simple spinner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple spinner</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="loading"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Simple spinner - Script Codes CSS Codes

/* Animation */
@-webkit-keyframes loading { to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes loading {	to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes loading {	to { -ms-transform: rotate(360deg); }
}
@keyframes loading {	to { transform: rotate(360deg); }
}
/* Loader (*/
#loading {	width: 40px;	height: 40px;	border-radius: 50%;	background: transparent;	border-top: 4px solid #fff;	border-right: 4px solid #fff;	border-bottom: 4px solid #777;	border-left: 4px solid #777;	-webkit-animation: loading 1.2s infinite linear;	-moz-animation: loading 1.2s infinite linear;	-ms-animation: loading 1.2s infinite linear;	animation: loading 1.2s infinite linear;
}
/* Just page styling */
body{	background: url('https://codepen.io/images/classy_fabric.png') #333;
}
div {	position: absolute;	top: 50%;	left: 50%;	margin: -20px 0 0 -20px;
}
Simple spinner - Script Codes
Simple spinner - Script Codes
Home Page Home
Developer Niels Oeltjen
Username NielsOeltjen
Uploaded September 08, 2022
Rating 3.5
Size 1,810 Kb
Views 36,432
Do you need developer help for Simple spinner?

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!

Niels Oeltjen (NielsOeltjen) Script Codes
Name
CSS only audio player UI
Layout states using jQuery and Data Attributes
Single element Adobe Brackets logo
Animated css matrix type
Sun
Prototype for a menu pattern
Another nice loader
Loading animation
Nice outline hover effect
Large menu pattern
Create amazing SEO content 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!