Loader dots in pure CSS and 1 element

Developer
Girish Sharma
Size
2,500 Kb
Views
36,432
  1. Loader dots in pure CSS and 1 element Previews
  2. Loader dots in pure CSS and 1 element HTML Codes
  3. Loader dots in pure CSS and 1 element CSS Codes

How do I make an loader dots in pure css and 1 element?

This pen is inspired by http://codepen.io/desandro/pen/HhdrA but uses only 1 element and pure CSS. Thus, any element can be converted into this type of loader by toggling the class. What is a loader dots in pure css and 1 element? How do you make a loader dots in pure css and 1 element? This script and codes were developed by Girish Sharma on 02 August 2022, Tuesday.

Loader dots in pure CSS and 1 element Previews
IQ Test

Loader dots in pure CSS and 1 element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loader dots in pure CSS and 1 element</title> <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! */ /* Demo specific style begin */
.loader-dots { position: absolute; top: calc(50% - 10px); left: calc(50% - 40px);
}
/* Demo specific style end */
.loader-dots:before, .loader-dots:after { height: 20px; width: 45px; background-image: radial-gradient(closest-side, #111 100%, transparent), radial-gradient(closest-side, #111 100%, transparent); background-position: 0%, 100%; background-size: 20px 20px, 20px 20px; background-repeat: no-repeat; position: absolute; animation-duration: 0.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: spin, onOff; content: '';
}
.loader-dots:before { animation-direction: normal, reverse;
}
.loader-dots:after { right: 0px; animation-direction: reverse, normal;
}
.loader-dots { height: 20px; width: 70px; background-image: radial-gradient(closest-side, #111 100%, transparent), radial-gradient(closest-side, #111 100%, transparent); background-position: 0%, 100%; background-size: 20px 20px, 20px 20px; background-repeat: no-repeat; position: absolute; animation: toggle 0.8s ease-in-out infinite;
}
@keyframes spin { 0% { transform: rotate(0deg) } 50% { transform: rotate(180deg) } 100% { transform: rotate(180deg) }
}
@keyframes onOff { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes toggle { 0% { background-size: 0px 0px, 20px 20px } 49.9% { background-size: 0px 0px, 20px 20px } 50% { background-size: 20px 20px, 0px 0px } 100% { background-size: 20px 20px, 0px 0px }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="loader-dots"></div>
</body>
</html>

Loader dots in pure CSS and 1 element - Script Codes CSS Codes

/* Demo specific style begin */
.loader-dots { position: absolute; top: calc(50% - 10px); left: calc(50% - 40px);
}
/* Demo specific style end */
.loader-dots:before, .loader-dots:after { height: 20px; width: 45px; background-image: radial-gradient(closest-side, #111 100%, transparent), radial-gradient(closest-side, #111 100%, transparent); background-position: 0%, 100%; background-size: 20px 20px, 20px 20px; background-repeat: no-repeat; position: absolute; animation-duration: 0.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: spin, onOff; content: '';
}
.loader-dots:before { animation-direction: normal, reverse;
}
.loader-dots:after { right: 0px; animation-direction: reverse, normal;
}
.loader-dots { height: 20px; width: 70px; background-image: radial-gradient(closest-side, #111 100%, transparent), radial-gradient(closest-side, #111 100%, transparent); background-position: 0%, 100%; background-size: 20px 20px, 20px 20px; background-repeat: no-repeat; position: absolute; animation: toggle 0.8s ease-in-out infinite;
}
@keyframes spin { 0% { transform: rotate(0deg) } 50% { transform: rotate(180deg) } 100% { transform: rotate(180deg) }
}
@keyframes onOff { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes toggle { 0% { background-size: 0px 0px, 20px 20px } 49.9% { background-size: 0px 0px, 20px 20px } 50% { background-size: 20px 20px, 0px 0px } 100% { background-size: 20px 20px, 0px 0px }
}
Loader dots in pure CSS and 1 element - Script Codes
Loader dots in pure CSS and 1 element - Script Codes
Home Page Home
Developer Girish Sharma
Username grssam
Uploaded August 02, 2022
Rating 3.5
Size 2,500 Kb
Views 36,432
Do you need developer help for Loader dots in pure CSS and 1 element?

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!

Girish Sharma (grssam) Script Codes
Name
Tilted Horizontal 3D spinner in pure CSS
XBox SmartGlass Loading Animation in CSS using 1 element
Google Plus loading animation in pure CSS
Horizontal 3D spinner in pure CSS
A Pen by Girish Sharma
More loader dots in pure CSS and single HTML element
Single DIV Loading ring in Pure CSS
Line, Square, Cube, Hypercube via folding in pure CSS
Metro style loading animation in pure CSS
Gmail like loading animation in pure CSS
Create amazing marketing copy 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!