CSS Preloaders
How do I make an css preloaders?
A set of common CSS Preloaders. What is a css preloaders? How do you make a css preloaders? This script and codes were developed by Tadaima on 01 December 2022, Thursday.
CSS Preloaders - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Preloaders</title> <title>CSS Preloaders</title> <meta charset="utf-8"> <meta name="description" content="CSS Preloaders, a set of common CSS Preloaders"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="A group of digital interface crafters."> <meta name="author" content="Tadaima"> <meta name="organization" content="Tadaima Web Site"> <meta name="application-name" content="Tadaima Web Site"> <meta name="keywords" content="art direction, design, graphic design, simple, easy, ux, ui, ui/ux, interaction, interactive, interactive design, ecommerce, native app development app, iOS, Android, front-end development, creative development, visual coding, CSS3, HTML5"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/https___codepen_io_tadaim.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="flexy__item flexy--items-center flexy--justify-center flexy--column"> <section class="flexy__child"> <header class="space--normal"> <h2>CSS Preloaders</h2> </header> <article class="space--huge"> <header class="space--normal"> <h3>Bouncing ball</h3> </header> <div class="preloader preloader__track preloader--bounce space--normal"> <div class="preloader__ball"> <div class="ball"></div> </div> </div> </article> <article class="space--huge"> <header class="space--normal"> <h3>Pendulum balls</h3> </header> <div class="preloader preloader--pendulum space--normal"> <div class="preloader__ball"> <div class="ball"></div> </div> <div class="preloader__ball"> <div class="ball"></div> </div> <div class="preloader__ball"> <div class="ball"></div> </div> <div class="preloader__ball"> <div class="ball"></div> </div> <div class="preloader__ball"> <div class="ball"></div> </div> </div> </article> </section> <header class="header"> <h1><a href="http://tadaima.studio" title="Go to Tadaima"> <svg class="logo-tadaima fill--white" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 80 80"> <title>Tadaima Studio.</title> <desc>A group of digital interface crafters.</desc> <g> <rect class="st5" y="0" width="80" height="80"></rect> </g> <lineargradient id="SVGID_1_" gradientunits="userSpaceOnUse" x1="27.7468" y1="18.248" x2="52.244" y2="42.7452"> <stop offset="0" style="stop-color:#FF5572"></stop> <stop offset="1" style="stop-color:#FF7555"></stop> </lineargradient> <polyline class="logo-tadaima--animated" style="fill:none;stroke:url(#SVGID_1_);stroke-width:2;stroke-miterlimit:10" points="52,27 25,27 25,23 55,23 55,31 40,31 40,54 "></polyline> <lineargradient id="SVGID_2_" gradientunits="userSpaceOnUse" x1="23.9948" y1="30.0043" x2="48.4901" y2="54.4996"> <stop offset="0" style="stop-color:#FF5572"></stop> <stop offset="1" style="stop-color:#FF7555"></stop> </lineargradient> <polyline class="logo-tadaima--animated" style="fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10" points="24,31 36,31 36,57 44,57 44,34 "></polyline> </svg></a></h1> </header>
</main>
<svg class="svg-bg" xmlns="http://www.w3.org/2000/svg"> <defs> <circle id="a" cx="1468" cy="133" r="35"></circle> <mask id="h" x="0" y="0" width="70" height="70" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use> </mask> <circle id="b" cx="236.5" cy="732.5" r="23.5"></circle> <mask id="i" x="0" y="0" width="47" height="47" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use> </mask> <circle id="c" cx="1120.5" cy="945.5" r="28.5"></circle> <mask id="j" x="0" y="0" width="57" height="57" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use> </mask> <path id="d" d="M1193.375 302.875l44.6 77.25h-89.2z"></path> <mask id="k" x="0" y="0" width="89.201" height="77.25" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#d"></use> </mask> <path id="e" d="M1610.8 513.3l34.14 59.128h-68.278z"></path> <mask id="l" x="0" y="0" width="68.277" height="59.13" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e"></use> </mask> <path id="f" d="M51.045 967.864l38.314 66.362H12.73z"></path> <mask id="m" x="0" y="0" width="76.629" height="66.362" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#f"></use> </mask> <path id="g" d="M46.045 311.097l26.5 45.897H19.546z"></path> <mask id="n" x="0" y="0" width="52.997" height="45.897" fill="#fff"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g"></use> </mask> </defs> <g style="mix-blend-mode:overlay" fill="none" fill-rule="evenodd" opacity=".35" stroke="#FFF"> <use class="svg-bg_element" mask="url(#h)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use> <use class="svg-bg_element" mask="url(#i)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b"></use> <use class="svg-bg_element opacity-anim" mask="url(#j)" stroke-width="6" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#c"></use> <path class="stroke-anim" d="M657.5 848.5l46 46" stroke-width="3" stroke-linecap="square"></path> <path d="M1360.5 1206.5l89-89M761.5 42.5l42-42" stroke-width="3" stroke-linecap="square"></path> <use class="svg-bg_element" mask="url(#k)" stroke-width="6" transform="rotate(90 1193.375 341.5)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#d"></use> <use class="svg-bg_element" mask="url(#l)" stroke-width="6" transform="rotate(45 1610.8 542.863)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e"></use> <use class="svg-bg_element rotate-anim" mask="url(#m)" stroke-width="6" transform="rotate(45 51.045 1001.045)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#f"></use> <use class="svg-bg_element" mask="url(#n)" stroke-width="6" transform="rotate(20 46.045 334.045)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#g"></use> </g>
</svg>
</body>
</html>
CSS Preloaders - Script Codes CSS Codes
@media (min-width: 480px) { section { padding-top: 5em; }
}
article { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.preloader { font-size: 2em;
}
.preloader__ball { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; width: 1em;
}
.preloader__ball:after,
.preloader__ball .ball { content: ''; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 50%; width: 1em; height: 1em;
}
.preloader__ball .ball { background-color: white;
}
.preloader__ball:after { position: absolute; z-index: -1; background-color: black; bottom: 0; left: 50%; opacity: .25; -webkit-transform: translate(-50%, 0.5em) rotateX(70deg) scale(1); transform: translate(-50%, 0.5em) rotateX(70deg) scale(1);
}
.preloader--bounce .preloader__ball { height: 5em;
}
.preloader--bounce .preloader__ball .ball { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: bounceBall 0.9s cubic-bezier(0, 0, 0.15, 1.01) infinite; animation: bounceBall 0.9s cubic-bezier(0, 0, 0.15, 1.01) infinite;
}
.preloader--bounce .preloader__ball:after { opacity: .25; -webkit-transform: translate(-50%, 0.5em) rotateX(70deg) scale(0.9); transform: translate(-50%, 0.5em) rotateX(70deg) scale(0.9); -webkit-animation: bounceBallShadow 0.9s linear infinite; animation: bounceBallShadow 0.9s linear infinite;
}
.preloader--bounce .preloader__ball.end:after { -webkit-animation: none; animation: none; opacity: 0;
}
.preloader--bounce .preloader__ball.end .ball { -webkit-animation: bounceBallExplode 0.9s linear forwards; animation: bounceBallExplode 0.9s linear forwards;
}
.preloader--pendulum { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.preloader--pendulum .preloader__ball { height: 2em;
}
.preloader--pendulum .preloader__ball:last-child:after,
.preloader--pendulum .preloader__ball:last-child .ball, .preloader--pendulum .preloader__ball:first-child:after,
.preloader--pendulum .preloader__ball:first-child .ball { -webkit-animation: 1.8s cubic-bezier(0, 0, 0.15, 1.01) infinite; animation: 1.8s cubic-bezier(0, 0, 0.15, 1.01) infinite;
}
.preloader--pendulum .preloader__ball:last-child .ball, .preloader--pendulum .preloader__ball:first-child .ball { -webkit-transform-origin: 50% -2em; transform-origin: 50% -2em;
}
.preloader--pendulum .preloader__ball:first-child .ball { -webkit-animation-name: pendulumBallLeft; animation-name: pendulumBallLeft;
}
.preloader--pendulum .preloader__ball:first-child:after { -webkit-animation-name: pendulumBallLeftShadow; animation-name: pendulumBallLeftShadow;
}
.preloader--pendulum .preloader__ball:last-child .ball { -webkit-animation-name: pendulumBallRight; animation-name: pendulumBallRight;
}
.preloader--pendulum .preloader__ball:last-child:after { -webkit-animation-name: pendulumBallRightShadow; animation-name: pendulumBallRightShadow;
}
@-webkit-keyframes bounceBallShadow { 50% { opacity: .1; -webkit-transform: translate(-50%, 0.5em) rotateX(70deg) scale(0.2); transform: translate(-50%, 0.5em) rotateX(70deg) scale(0.2); }
}
@keyframes bounceBallShadow { 50% { opacity: .1; -webkit-transform: translate(-50%, 0.5em) rotateX(70deg) scale(0.2); transform: translate(-50%, 0.5em) rotateX(70deg) scale(0.2); }
}
@-webkit-keyframes bounceBall { 0%, 100% { -webkit-transform: translate(0, 4em) scaleY(1) scaleX(1); transform: translate(0, 4em) scaleY(1) scaleX(1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); -webkit-transform: translate(0, 0) scaleY(1) scaleX(1); transform: translate(0, 0) scaleY(1) scaleX(1); } 96% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01); animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01); -webkit-transform: translate(0, 4em) scaleY(1) scaleX(1); transform: translate(0, 4em) scaleY(1) scaleX(1); } 98% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01); animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01); -webkit-transform: translate(0, 4em) scaleY(0.8) scaleX(1.2); transform: translate(0, 4em) scaleY(0.8) scaleX(1.2); }
}
@keyframes bounceBall { 0%, 100% { -webkit-transform: translate(0, 4em) scaleY(1) scaleX(1); transform: translate(0, 4em) scaleY(1) scaleX(1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); -webkit-transform: translate(0, 0) scaleY(1) scaleX(1); transform: translate(0, 0) scaleY(1) scaleX(1); } 96% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01); animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01); -webkit-transform: translate(0, 4em) scaleY(1) scaleX(1); transform: translate(0, 4em) scaleY(1) scaleX(1); } 98% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01); animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01); -webkit-transform: translate(0, 4em) scaleY(0.8) scaleX(1.2); transform: translate(0, 4em) scaleY(0.8) scaleX(1.2); }
}
@-webkit-keyframes bounceBallExplode { 0% { -webkit-transform: translate(0, 4em) scale(1); transform: translate(0, 4em) scale(1); } 5% { -webkit-transform: translate(0, 4em) scale(0.8); transform: translate(0, 4em) scale(0.8); opacity: 1; } 10%, 100% { -webkit-transform: translate(0, 4em) scale(2); transform: translate(0, 4em) scale(2); opacity: 0; }
}
@keyframes bounceBallExplode { 0% { -webkit-transform: translate(0, 4em) scale(1); transform: translate(0, 4em) scale(1); } 5% { -webkit-transform: translate(0, 4em) scale(0.8); transform: translate(0, 4em) scale(0.8); opacity: 1; } 10%, 100% { -webkit-transform: translate(0, 4em) scale(2); transform: translate(0, 4em) scale(2); opacity: 0; }
}
@-webkit-keyframes pendulumBallLeft { 20% { -webkit-animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); -webkit-transform: translate(0, 0em) rotate(90deg); transform: translate(0, 0em) rotate(90deg); } 100%, 50% { -webkit-transform: translate(0, 0em) rotate(0); transform: translate(0, 0em) rotate(0); }
}
@keyframes pendulumBallLeft { 20% { -webkit-animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); -webkit-transform: translate(0, 0em) rotate(90deg); transform: translate(0, 0em) rotate(90deg); } 100%, 50% { -webkit-transform: translate(0, 0em) rotate(0); transform: translate(0, 0em) rotate(0); }
}
@-webkit-keyframes pendulumBallRight { 80% { -webkit-animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); -webkit-transform: translate(0, 0em) rotate(-90deg); transform: translate(0, 0em) rotate(-90deg); } 100%, 50% { -webkit-transform: translate(0, 0em) rotate(0); transform: translate(0, 0em) rotate(0); }
}
@keyframes pendulumBallRight { 80% { -webkit-animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); -webkit-transform: translate(0, 0em) rotate(-90deg); transform: translate(0, 0em) rotate(-90deg); } 100%, 50% { -webkit-transform: translate(0, 0em) rotate(0); transform: translate(0, 0em) rotate(0); }
}
@-webkit-keyframes pendulumBallLeftShadow { 20% { -webkit-animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); opacity: .1; -webkit-transform: translate(-3.5em, 0.5em) rotateX(70deg) scale(0.4); transform: translate(-3.5em, 0.5em) rotateX(70deg) scale(0.4); } 100%, 50% { opacity: .25; -webkit-transform: translate(-50%, 0.5em) rotateX(70deg) scale(1); transform: translate(-50%, 0.5em) rotateX(70deg) scale(1); }
}
@keyframes pendulumBallLeftShadow { 20% { -webkit-animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); opacity: .1; -webkit-transform: translate(-3.5em, 0.5em) rotateX(70deg) scale(0.4); transform: translate(-3.5em, 0.5em) rotateX(70deg) scale(0.4); } 100%, 50% { opacity: .25; -webkit-transform: translate(-50%, 0.5em) rotateX(70deg) scale(1); transform: translate(-50%, 0.5em) rotateX(70deg) scale(1); }
}
@-webkit-keyframes pendulumBallRightShadow { 80% { -webkit-animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); opacity: .1; -webkit-transform: translate(2.2em, 0.5em) rotateX(70deg) scale(0.4); transform: translate(2.2em, 0.5em) rotateX(70deg) scale(0.4); } 100%, 50% { opacity: .25; -webkit-transform: translate(-50%, 0.5em) rotateX(70deg) scale(1); transform: translate(-50%, 0.5em) rotateX(70deg) scale(1); }
}
@keyframes pendulumBallRightShadow { 80% { -webkit-animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1); opacity: .1; -webkit-transform: translate(2.2em, 0.5em) rotateX(70deg) scale(0.4); transform: translate(2.2em, 0.5em) rotateX(70deg) scale(0.4); } 100%, 50% { opacity: .25; -webkit-transform: translate(-50%, 0.5em) rotateX(70deg) scale(1); transform: translate(-50%, 0.5em) rotateX(70deg) scale(1); }
}
Developer | Tadaima |
Username | tadaima |
Uploaded | December 01, 2022 |
Rating | 4.5 |
Size | 97,977 Kb |
Views | 8,096 |
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!
Name | Size |
Ratings Inspiration | 106,676 Kb |
CSS Dropdown | 103,937 Kb |
Bars Chart | 98,019 Kb |
Pure CSS Radial Chart | 105,429 Kb |
HTML5 Video Player | 101,864 Kb |
CSS Random Mosaic | 107,691 Kb |
Base Styles | 184,741 Kb |
Progress Ball | 105,332 Kb |
Logo Effect | 104,723 Kb |
Letter I | 97,110 Kb |
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!
Name | Username | Size |
Next Word Predictor | Rfalor | 2,776 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
Loading Bar | Jaradlight | 2,333 Kb |
Display properties | Hamzaerbay | 1,886 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!