Faster Loading with random()

Developer
Kaushalya Mandaliya
Size
2,859 Kb
Views
54,648
  1. Faster Loading with random() Previews
  2. Faster Loading with random() HTML Codes
  3. Faster Loading with random() CSS Codes
  4. Faster Loading with random() JS Codes

How do I make an faster loading with random()?

Loading using css. :D. What is a faster loading with random()? How do you make a faster loading with random()? This script and codes were developed by Kaushalya Mandaliya on 08 August 2022, Monday.

Faster Loading with random() Previews
IQ Test

Faster Loading with random() - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Faster Loading with random()</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/e3fb65b483633e5821669be05.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Faster Loading with random() - Script Codes CSS Codes

body { background: grey;
}
.wrapper { width: 10em; margin: 6em auto;
}
.dot { position: absolute; height: 1em; width: 1em; background: aqua; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: inline-block;
}
.dot:nth-child(1) { margin: 0.3em 1.7em; -moz-animation: load 1.2s linear infinite; -webkit-animation: load 1.2s linear infinite; animation: load 1.2s linear infinite; -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; animation-delay: 0.15s;
}
.dot:nth-child(2) { margin: 0.3em 3.4em; -moz-animation: load 1.2s linear infinite; -webkit-animation: load 1.2s linear infinite; animation: load 1.2s linear infinite; -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s;
}
.dot:nth-child(3) { margin: 0.3em 5.1em; -moz-animation: load 1.2s linear infinite; -webkit-animation: load 1.2s linear infinite; animation: load 1.2s linear infinite; -moz-animation-delay: 0.45s; -webkit-animation-delay: 0.45s; animation-delay: 0.45s;
}
.dot:nth-child(4) { margin: 0.3em 6.8em; -moz-animation: load 1.2s linear infinite; -webkit-animation: load 1.2s linear infinite; animation: load 1.2s linear infinite; -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; animation-delay: 0.6s;
}
.dot:nth-child(5) { margin: 0.3em 8.5em; -moz-animation: load 1.2s linear infinite; -webkit-animation: load 1.2s linear infinite; animation: load 1.2s linear infinite; -moz-animation-delay: 0.75s; -webkit-animation-delay: 0.75s; animation-delay: 0.75s;
}
.dot:nth-child(6) { margin: 0.3em 10.2em; -moz-animation: load 1.2s linear infinite; -webkit-animation: load 1.2s linear infinite; animation: load 1.2s linear infinite; -moz-animation-delay: 0.9s; -webkit-animation-delay: 0.9s; animation-delay: 0.9s;
}
.dot:nth-child(7) { margin: 0.3em 11.9em; -moz-animation: load 1.2s linear infinite; -webkit-animation: load 1.2s linear infinite; animation: load 1.2s linear infinite; -moz-animation-delay: 1.05s; -webkit-animation-delay: 1.05s; animation-delay: 1.05s;
}
@-moz-keyframes load { 5% { margin-top: -2em; position: absolute; } 100% { margin-top: 0; background: #35c876; }
}
@-webkit-keyframes load { 5% { margin-top: -2em; position: absolute; } 100% { margin-top: 0; background: #94fd62; }
}
@keyframes load { 5% { margin-top: -2em; position: absolute; } 100% { margin-top: 0; background: #4b8a12; }
}

Faster Loading with random() - Script Codes JS Codes

/* * * * * * 2013 By Kaushalya R Mandaliya. * https://twitter.com/kmandalwala * http://seebeetee.com * * * */
Faster Loading with random() - Script Codes
Faster Loading with random() - Script Codes
Home Page Home
Developer Kaushalya Mandaliya
Username kman
Uploaded August 08, 2022
Rating 4
Size 2,859 Kb
Views 54,648
Do you need developer help for Faster Loading with random()?

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!

Kaushalya Mandaliya (kman) Script Codes
Name
Equalizer loading
Loading
Loading
Another Great Login from Dribbble
Github Flavoured Markdown Cheat Sheet
Html-imports live demo
One div simple Loader
Bakery Login
Indian flag like menu
Trello like loading
Create amazing video scripts 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!