Loader

Developer
Bryan Jones
Size
2,367 Kb
Views
60,720
  1. Loader Previews
  2. Loader HTML Codes
  3. Loader CSS Codes

How do I make an loader?

A loader with a little more effect to it.. What is a loader? How do you make a loader? This script and codes were developed by Bryan Jones on 13 July 2022, Wednesday.

Loader Previews
IQ Test

Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="border"></div>
<div id="loader"></div>
</body>
</html>

Loader - Script Codes CSS Codes

/** * Keyframes. */
@-webkit-keyframes rotation { 0% { -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}
@keyframes rotation { 0% { -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}
@-webkit-keyframes reverse-rotation { 0% { -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(-360deg); -ms-transform: rotateZ(-360deg); -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); }
}
@keyframes reverse-rotation { 0% { -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(-360deg); -ms-transform: rotateZ(-360deg); -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); }
}
@-webkit-keyframes pulse { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 100% { -moz-transform: scale(1.5); -ms-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5); }
}
@keyframes pulse { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 100% { -moz-transform: scale(1.5); -ms-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5); }
}
/** * Styling. */
#border { border-color: transparent transparent #aad #aad; border-style: solid; border-width: 5px; height: 150px; left: calc(50% - 70px); position: absolute; top: calc(50% - 73px); width: 150px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-animation: reverse-rotation 1s linear infinite; -webkit-animation: reverse-rotation 1s linear infinite; animation: reverse-rotation 1s linear infinite;
}
#loader { background-color: #fff; border-color: #ccd #ccd #ccd #446; border-style: solid; border-width: 10px; height: 100px; left: calc(50% - 50px); position: absolute; top: calc(50% - 50px); width: 100px; -moz-animation: rotation 1s linear infinite; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
#loader::after { background-color: #aad; content: ""; height: 20px; left: calc(50% - 10px); position: absolute; top: calc(50% - 10px); width: 20px; -moz-animation: pulse 1s linear infinite alternate; -webkit-animation: pulse 1s linear infinite alternate; animation: pulse 1s linear infinite alternate; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
Loader - Script Codes
Loader - Script Codes
Home Page Home
Developer Bryan Jones
Username bartuc
Uploaded July 13, 2022
Rating 3
Size 2,367 Kb
Views 60,720
Do you need developer help for Loader?

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!

Bryan Jones (bartuc) Script Codes
Name
Galaxy
CSS Loader
Books
Screens
See the Truth
Planet Rotation
Card Flip
Planet Awesome
3D Saturn
Subscribe
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!