Flexible Google-style loader with CSS

Developer
Size
2,473 Kb
Views
20,240

How do I make an flexible google-style loader with css?

By @leaverou. What is a flexible google-style loader with css? How do you make a flexible google-style loader with css? This script and codes were developed by Twikito on 26 November 2022, Saturday.

Flexible Google-style loader with CSS Previews

Flexible Google-style loader with CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexible Google-style loader with CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ /** * Flexible Google-style progress indicator */
@keyframes progress {	50% { border-width: .5em 0; }	to { border-width: .5em 0 0 0; }
}
@keyframes rotate {	to { transform: rotate(-270deg); }
}
.progress {	display: inline-block;	font-size: 50px; /* Size of the progress indicator */	width: 1em; height: 1em;	border: solid white;	border-top-color: #ddd;	border-width: 0 0 .5em 0;	border-radius: 50%;	box-sizing: border-box;	margin: .1em .2em;	background: linear-gradient(white 50%, #ddd 50%);	background-origin: border-box;	transform: rotate(90deg);	animation: rotate 1s steps(4) infinite, progress .25s linear infinite alternate;	text-indent: 99em;	overflow: hidden;
}
.progress.small { font-size: 16px }
.progress.large { font-size: 100px } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Flexible Google-style loader with CSS by Lea Verou @leaverou http://lea.verou.me/2013/11/flexible-google-style-loader-with-css/
-->
<div class="small progress">Loading…</div>
<div class="progress">Loading…</div>
<div class="large progress">Loading…</div> <script src="js/index.js"></script>
</body>
</html>

Flexible Google-style loader with CSS - Script Codes CSS Codes

/** * Flexible Google-style progress indicator */
@keyframes progress {	50% { border-width: .5em 0; }	to { border-width: .5em 0 0 0; }
}
@keyframes rotate {	to { transform: rotate(-270deg); }
}
.progress {	display: inline-block;	font-size: 50px; /* Size of the progress indicator */	width: 1em; height: 1em;	border: solid white;	border-top-color: #ddd;	border-width: 0 0 .5em 0;	border-radius: 50%;	box-sizing: border-box;	margin: .1em .2em;	background: linear-gradient(white 50%, #ddd 50%);	background-origin: border-box;	transform: rotate(90deg);	animation: rotate 1s steps(4) infinite, progress .25s linear infinite alternate;	text-indent: 99em;	overflow: hidden;
}
.progress.small { font-size: 16px }
.progress.large { font-size: 100px }

Flexible Google-style loader with CSS - Script Codes JS Codes

// NO JS
Flexible Google-style loader with CSS - Script Codes
Flexible Google-style loader with CSS - Script Codes
Home Page Home
Developer Twikito
Username Twikito
Uploaded November 26, 2022
Rating 3
Size 2,473 Kb
Views 20,240
Do you need developer help for Flexible Google-style loader with CSS?

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!

Twikito (Twikito) Script Codes
Create amazing blog posts 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!