CSS3 loading spinner

Developer
Christian Fleschhut
Size
2,950 Kb
Views
32,384
  1. CSS3 loading spinner Previews
  2. CSS3 loading spinner HTML Codes
  3. CSS3 loading spinner CSS Codes

How do I make an css3 loading spinner?

What is a css3 loading spinner? How do you make a css3 loading spinner? This script and codes were developed by Christian Fleschhut on 11 August 2022, Thursday.

CSS3 loading spinner Previews
IQ Test

CSS3 loading spinner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 loading spinner</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <div class='spinner'> <div class='spinner__bar'></div> <div class='spinner__bar'></div> <div class='spinner__bar'></div> <div class='spinner__bar'></div> <div class='spinner__bar'></div> <div class='spinner__bar'></div> <div class='spinner__bar'></div> <div class='spinner__bar'></div> <div class='spinner__bar'></div> <div class='spinner__bar'></div> <div class='spinner__bar'></div> <div class='spinner__bar'></div> </div>
</div>
<p> <small> via <a href='https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webkit'> https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webkit </a> </small>
</p>
</body>
</html>

CSS3 loading spinner - Script Codes CSS Codes

@-webkit-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0.25; }
}
@-moz-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0.25; }
}
@keyframes fade { 0% { opacity: 1; } 100% { opacity: 0.25; }
}
.spinner { display: inline-block; position: relative; -webkit-transform: scale(1) translate(0, -50px); -moz-transform: scale(1) translate(0, -50px); -ms-transform: scale(1) translate(0, -50px); -o-transform: scale(1) translate(0, -50px); transform: scale(1) translate(0, -50px);
}
.spinner__bar { -webkit-animation: fade 1s infinite linear; -moz-animation: fade 1s infinite linear; animation: fade 1s infinite linear; position: absolute; top: 0; left: 0; width: 10px; height: 30px; border-radius: 5px; background: #333; opacity: 0;
}
.spinner__bar:nth-child(1) { -webkit-transform: rotate(0deg) translate(0px, -40px); -moz-transform: rotate(0deg) translate(0px, -40px); -ms-transform: rotate(0deg) translate(0px, -40px); -o-transform: rotate(0deg) translate(0px, -40px); transform: rotate(0deg) translate(0px, -40px); -webkit-animation-delay: 0s; -moz-animation-delay: 0s; animation-delay: 0s;
}
.spinner__bar:nth-child(2) { -webkit-transform: rotate(30deg) translate(0px, -40px); -moz-transform: rotate(30deg) translate(0px, -40px); -ms-transform: rotate(30deg) translate(0px, -40px); -o-transform: rotate(30deg) translate(0px, -40px); transform: rotate(30deg) translate(0px, -40px); -webkit-animation-delay: 0.08333s; -moz-animation-delay: 0.08333s; animation-delay: 0.08333s;
}
.spinner__bar:nth-child(3) { -webkit-transform: rotate(60deg) translate(0px, -40px); -moz-transform: rotate(60deg) translate(0px, -40px); -ms-transform: rotate(60deg) translate(0px, -40px); -o-transform: rotate(60deg) translate(0px, -40px); transform: rotate(60deg) translate(0px, -40px); -webkit-animation-delay: 0.16667s; -moz-animation-delay: 0.16667s; animation-delay: 0.16667s;
}
.spinner__bar:nth-child(4) { -webkit-transform: rotate(90deg) translate(0px, -40px); -moz-transform: rotate(90deg) translate(0px, -40px); -ms-transform: rotate(90deg) translate(0px, -40px); -o-transform: rotate(90deg) translate(0px, -40px); transform: rotate(90deg) translate(0px, -40px); -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s;
}
.spinner__bar:nth-child(5) { -webkit-transform: rotate(120deg) translate(0px, -40px); -moz-transform: rotate(120deg) translate(0px, -40px); -ms-transform: rotate(120deg) translate(0px, -40px); -o-transform: rotate(120deg) translate(0px, -40px); transform: rotate(120deg) translate(0px, -40px); -webkit-animation-delay: 0.33333s; -moz-animation-delay: 0.33333s; animation-delay: 0.33333s;
}
.spinner__bar:nth-child(6) { -webkit-transform: rotate(150deg) translate(0px, -40px); -moz-transform: rotate(150deg) translate(0px, -40px); -ms-transform: rotate(150deg) translate(0px, -40px); -o-transform: rotate(150deg) translate(0px, -40px); transform: rotate(150deg) translate(0px, -40px); -webkit-animation-delay: 0.41667s; -moz-animation-delay: 0.41667s; animation-delay: 0.41667s;
}
.spinner__bar:nth-child(7) { -webkit-transform: rotate(180deg) translate(0px, -40px); -moz-transform: rotate(180deg) translate(0px, -40px); -ms-transform: rotate(180deg) translate(0px, -40px); -o-transform: rotate(180deg) translate(0px, -40px); transform: rotate(180deg) translate(0px, -40px); -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s;
}
.spinner__bar:nth-child(8) { -webkit-transform: rotate(210deg) translate(0px, -40px); -moz-transform: rotate(210deg) translate(0px, -40px); -ms-transform: rotate(210deg) translate(0px, -40px); -o-transform: rotate(210deg) translate(0px, -40px); transform: rotate(210deg) translate(0px, -40px); -webkit-animation-delay: 0.58333s; -moz-animation-delay: 0.58333s; animation-delay: 0.58333s;
}
.spinner__bar:nth-child(9) { -webkit-transform: rotate(240deg) translate(0px, -40px); -moz-transform: rotate(240deg) translate(0px, -40px); -ms-transform: rotate(240deg) translate(0px, -40px); -o-transform: rotate(240deg) translate(0px, -40px); transform: rotate(240deg) translate(0px, -40px); -webkit-animation-delay: 0.66667s; -moz-animation-delay: 0.66667s; animation-delay: 0.66667s;
}
.spinner__bar:nth-child(10) { -webkit-transform: rotate(270deg) translate(0px, -40px); -moz-transform: rotate(270deg) translate(0px, -40px); -ms-transform: rotate(270deg) translate(0px, -40px); -o-transform: rotate(270deg) translate(0px, -40px); transform: rotate(270deg) translate(0px, -40px); -webkit-animation-delay: 0.75s; -moz-animation-delay: 0.75s; animation-delay: 0.75s;
}
.spinner__bar:nth-child(11) { -webkit-transform: rotate(300deg) translate(0px, -40px); -moz-transform: rotate(300deg) translate(0px, -40px); -ms-transform: rotate(300deg) translate(0px, -40px); -o-transform: rotate(300deg) translate(0px, -40px); transform: rotate(300deg) translate(0px, -40px); -webkit-animation-delay: 0.83333s; -moz-animation-delay: 0.83333s; animation-delay: 0.83333s;
}
.spinner__bar:nth-child(12) { -webkit-transform: rotate(330deg) translate(0px, -40px); -moz-transform: rotate(330deg) translate(0px, -40px); -ms-transform: rotate(330deg) translate(0px, -40px); -o-transform: rotate(330deg) translate(0px, -40px); transform: rotate(330deg) translate(0px, -40px); -webkit-animation-delay: 0.91667s; -moz-animation-delay: 0.91667s; animation-delay: 0.91667s;
}
html,
body { height: 100%;
}
.container { display: flex; align-items: center; justify-content: center; height: 100%;
}
CSS3 loading spinner - Script Codes
CSS3 loading spinner - Script Codes
Home Page Home
Developer Christian Fleschhut
Username cfleschhut
Uploaded August 11, 2022
Rating 3
Size 2,950 Kb
Views 32,384
Do you need developer help for CSS3 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!

Christian Fleschhut (cfleschhut) Script Codes
Name
HubSpot Odometer Quicktest
Givie.io Logo in CSS
AngularJS comments form
CodeSchool Powering Up with React
Playing with firebase
Starting out with Ember.JS
AngularJS tutorial app
Backbone.js Playground
Vertical Tab Component
React-Bootstrap sandbox
Create amazing art & images 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!