A better loading spinner

Developer
Stove
Size
3,265 Kb
Views
46,552
  1. A better loading spinner Previews
  2. A better loading spinner HTML Codes
  3. A better loading spinner CSS Codes

How do I make an a better loading spinner?

Bored of the spinning dots? They look a bit rubbish, right?Here's a more Windows 8 style loading circle!. What is a a better loading spinner? How do you make a a better loading spinner? This script and codes were developed by Stove on 07 July 2022, Thursday.

A better loading spinner Previews
IQ Test

A better loading spinner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A better loading spinner</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <h2>Rubbish!</h2> <div class="spinner"></div> <h2>Awesome!</h2> <div class="better-spinner"></div>
</main>
</body>
</html>

A better loading spinner - Script Codes CSS Codes

body { font-family: sans-serif; text-align: center;
}
main { -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; position: absolute;
}
.spinner { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Spinner_font_awesome.svg/512px-Spinner_font_awesome.svg.png); width: 100px; height: 100px; background-size: 100%; -webkit-animation: spin 1500ms linear infinite; animation: spin 1500ms linear infinite; margin: 0 auto;
}
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.better-spinner { width: 80px; height: 80px; position: relative; margin: 0 auto;
}
.better-spinner:before { width: 15px; height: 15px; background-color: transparent; border-radius: 100px; content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); -webkit-animation: 1500ms linear pulse infinite reverse; animation: 1500ms linear pulse infinite reverse; box-shadow: 0px 0px black, 28.28846px 28.28008px 0 3px black, 0.01185px 40px 0 2.12226px black, -28.2717px 28.29684px 0 0.00178px black, -39.99999px 0.02371px 0 -2.11975px black, -28.30522px -28.26331px 0 -3px black, -0.03556px -39.99998px 0 -2.12352px black, 28.25492px -28.31359px 0 -0.00356px black, 39.99997px -0.04741px 0 2.11849px black;
}
@-webkit-keyframes pulse { 0% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 3px black, 0.01185px 40px 0 2.12226px black, -28.2717px 28.29684px 0 0.00178px black, -39.99999px 0.02371px 0 -2.11975px black, -28.30522px -28.26331px 0 -3px black, -0.03556px -39.99998px 0 -2.12352px black, 28.25492px -28.31359px 0 -0.00356px black, 39.99997px -0.04741px 0 2.11849px black; } 12.5% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 2.12226px black, 0.01185px 40px 0 0.00178px black, -28.2717px 28.29684px 0 -2.11975px black, -39.99999px 0.02371px 0 -3px black, -28.30522px -28.26331px 0 -2.12352px black, -0.03556px -39.99998px 0 -0.00356px black, 28.25492px -28.31359px 0 2.11849px black, 39.99997px -0.04741px 0 3px black; } 25% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 0.00178px black, 0.01185px 40px 0 -2.11975px black, -28.2717px 28.29684px 0 -3px black, -39.99999px 0.02371px 0 -2.12352px black, -28.30522px -28.26331px 0 -0.00356px black, -0.03556px -39.99998px 0 2.11849px black, 28.25492px -28.31359px 0 3px black, 39.99997px -0.04741px 0 2.12477px black; } 37.5% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 -2.11975px black, 0.01185px 40px 0 -3px black, -28.2717px 28.29684px 0 -2.12352px black, -39.99999px 0.02371px 0 -0.00356px black, -28.30522px -28.26331px 0 2.11849px black, -0.03556px -39.99998px 0 3px black, 28.25492px -28.31359px 0 2.12477px black, 39.99997px -0.04741px 0 0.00533px black; } 50% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 -3px black, 0.01185px 40px 0 -2.12352px black, -28.2717px 28.29684px 0 -0.00356px black, -39.99999px 0.02371px 0 2.11849px black, -28.30522px -28.26331px 0 3px black, -0.03556px -39.99998px 0 2.12477px black, 28.25492px -28.31359px 0 0.00533px black, 39.99997px -0.04741px 0 -2.11723px black; } 62.5% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 -2.12352px black, 0.01185px 40px 0 -0.00356px black, -28.2717px 28.29684px 0 2.11849px black, -39.99999px 0.02371px 0 3px black, -28.30522px -28.26331px 0 2.12477px black, -0.03556px -39.99998px 0 0.00533px black, 28.25492px -28.31359px 0 -2.11723px black, 39.99997px -0.04741px 0 -2.99999px black; } 75% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 -0.00356px black, 0.01185px 40px 0 2.11849px black, -28.2717px 28.29684px 0 3px black, -39.99999px 0.02371px 0 2.12477px black, -28.30522px -28.26331px 0 0.00533px black, -0.03556px -39.99998px 0 -2.11723px black, 28.25492px -28.31359px 0 -2.99999px black, 39.99997px -0.04741px 0 -2.12603px black; } 87.5% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 2.11849px black, 0.01185px 40px 0 3px black, -28.2717px 28.29684px 0 2.12477px black, -39.99999px 0.02371px 0 0.00533px black, -28.30522px -28.26331px 0 -2.11723px black, -0.03556px -39.99998px 0 -2.99999px black, 28.25492px -28.31359px 0 -2.12603px black, 39.99997px -0.04741px 0 -0.00711px black; }
}
@keyframes pulse { 0% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 3px black, 0.01185px 40px 0 2.12226px black, -28.2717px 28.29684px 0 0.00178px black, -39.99999px 0.02371px 0 -2.11975px black, -28.30522px -28.26331px 0 -3px black, -0.03556px -39.99998px 0 -2.12352px black, 28.25492px -28.31359px 0 -0.00356px black, 39.99997px -0.04741px 0 2.11849px black; } 12.5% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 2.12226px black, 0.01185px 40px 0 0.00178px black, -28.2717px 28.29684px 0 -2.11975px black, -39.99999px 0.02371px 0 -3px black, -28.30522px -28.26331px 0 -2.12352px black, -0.03556px -39.99998px 0 -0.00356px black, 28.25492px -28.31359px 0 2.11849px black, 39.99997px -0.04741px 0 3px black; } 25% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 0.00178px black, 0.01185px 40px 0 -2.11975px black, -28.2717px 28.29684px 0 -3px black, -39.99999px 0.02371px 0 -2.12352px black, -28.30522px -28.26331px 0 -0.00356px black, -0.03556px -39.99998px 0 2.11849px black, 28.25492px -28.31359px 0 3px black, 39.99997px -0.04741px 0 2.12477px black; } 37.5% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 -2.11975px black, 0.01185px 40px 0 -3px black, -28.2717px 28.29684px 0 -2.12352px black, -39.99999px 0.02371px 0 -0.00356px black, -28.30522px -28.26331px 0 2.11849px black, -0.03556px -39.99998px 0 3px black, 28.25492px -28.31359px 0 2.12477px black, 39.99997px -0.04741px 0 0.00533px black; } 50% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 -3px black, 0.01185px 40px 0 -2.12352px black, -28.2717px 28.29684px 0 -0.00356px black, -39.99999px 0.02371px 0 2.11849px black, -28.30522px -28.26331px 0 3px black, -0.03556px -39.99998px 0 2.12477px black, 28.25492px -28.31359px 0 0.00533px black, 39.99997px -0.04741px 0 -2.11723px black; } 62.5% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 -2.12352px black, 0.01185px 40px 0 -0.00356px black, -28.2717px 28.29684px 0 2.11849px black, -39.99999px 0.02371px 0 3px black, -28.30522px -28.26331px 0 2.12477px black, -0.03556px -39.99998px 0 0.00533px black, 28.25492px -28.31359px 0 -2.11723px black, 39.99997px -0.04741px 0 -2.99999px black; } 75% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 -0.00356px black, 0.01185px 40px 0 2.11849px black, -28.2717px 28.29684px 0 3px black, -39.99999px 0.02371px 0 2.12477px black, -28.30522px -28.26331px 0 0.00533px black, -0.03556px -39.99998px 0 -2.11723px black, 28.25492px -28.31359px 0 -2.99999px black, 39.99997px -0.04741px 0 -2.12603px black; } 87.5% { box-shadow: 0px 0px black, 28.28846px 28.28008px 0 2.11849px black, 0.01185px 40px 0 3px black, -28.2717px 28.29684px 0 2.12477px black, -39.99999px 0.02371px 0 0.00533px black, -28.30522px -28.26331px 0 -2.11723px black, -0.03556px -39.99998px 0 -2.99999px black, 28.25492px -28.31359px 0 -2.12603px black, 39.99997px -0.04741px 0 -0.00711px black; }
}
A better loading spinner - Script Codes
A better loading spinner - Script Codes
Home Page Home
Developer Stove
Username stevn
Uploaded July 07, 2022
Rating 3
Size 3,265 Kb
Views 46,552
Do you need developer help for A better loading 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!

Stove (stevn) Script Codes
Name
CSS3D cube demo
Colour interpolation
Sinusoidal goodness
Android Nougat update animation
FRAPS counter
Google burger arrow
Letter drawing in SCSS for pixel logos
Favourite interaction and animation
Pure JS word cloud.
A Pen by Stove
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!