Little loading spinner

Developer
Jelmer
Size
2,599 Kb
Views
26,312
  1. Little loading spinner Previews
  2. Little loading spinner HTML Codes
  3. Little loading spinner CSS Codes
  4. Little loading spinner JS Codes

How do I make an little loading spinner?

A loading spinner based on that of The Noun Project (http://thenounproject.com). What is a little loading spinner? How do you make a little loading spinner? This script and codes were developed by Jelmer on 02 December 2022, Friday.

Little loading spinner Previews
IQ Test

Little loading spinner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Little loading spinner </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"> Loading... <div class="ball"></div> <div class="ball"></div> <div class="ball"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Little loading spinner - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { height: 100%;
}
body { background: skyblue; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.loader { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; width: 99px; position: relative; text-indent: -9999em;
}
.ball { border-radius: 50%; background: white; width: 10px; height: 10px; position: absolute; top: 0; left: 0; -webkit-animation: loading 1.2s linear infinite; animation: loading 1.2s linear infinite;
}
.ball:nth-of-type(2) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s;
}
.ball:nth-of-type(3) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s;
}
@-webkit-keyframes loading { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 20% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: translate3d(33px, 0, 0); transform: translate3d(33px, 0, 0); } 60% { -webkit-transform: translate3d(66px, 0, 0); transform: translate3d(66px, 0, 0); } 80% { -webkit-transform: translate3d(99px, 0, 0); transform: translate3d(99px, 0, 0); opacity: 1; } 100% { -webkit-transform: translate3d(99px, 0, 0) scale(0.5); transform: translate3d(99px, 0, 0) scale(0.5); opacity: 0; }
}
@keyframes loading { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 20% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: translate3d(33px, 0, 0); transform: translate3d(33px, 0, 0); } 60% { -webkit-transform: translate3d(66px, 0, 0); transform: translate3d(66px, 0, 0); } 80% { -webkit-transform: translate3d(99px, 0, 0); transform: translate3d(99px, 0, 0); opacity: 1; } 100% { -webkit-transform: translate3d(99px, 0, 0) scale(0.5); transform: translate3d(99px, 0, 0) scale(0.5); opacity: 0; }
}

Little loading spinner - Script Codes JS Codes

// A loading spinner based on that of The Noun Project
// http://thenounproject.com
Little loading spinner - Script Codes
Little loading spinner - Script Codes
Home Page Home
Developer Jelmer
Username jelmerdemaat
Uploaded December 02, 2022
Rating 3.5
Size 2,599 Kb
Views 26,312
Do you need developer help for Little 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!

Jelmer (jelmerdemaat) Script Codes
Name
Simple responsive photo slider gallery
Get Gist comments using GitHub API
Animated counter element
Ungrid with gutters
Justified divs, attempt 3
CSS only loading spinner
Test current page in Google PageSpeed
Responsive form design
Justified divs, attempt 4
A Pen by Jelmer
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!