CSSkateboard loading screen
How do I make an csskateboard loading screen?
Kick push.. What is a csskateboard loading screen? How do you make a csskateboard loading screen? This script and codes were developed by Nicolas Udy on 10 August 2022, Wednesday.
CSSkateboard loading screen Previews
CSSkateboard loading screen - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSSkateboard loading screen</title> <link rel='stylesheet prefetch' href='css/jwmbjg.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="move"> <div id="board"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 120"> <g fill="none" stroke-width="20" stroke-miterlimit="2" stroke-linecap="round"> <path d="m25 15.6651c0 0 20 32.4928 60 32.4928h280c40 0 60-32.4928 60-32.4928" stroke="#3c4042"/> <path d="m92.3395 87.2264c0-11.0456 8.9545-20 20.0005-20 11.045 0 20 8.9544 20 20.0001 0 11.0457-8.955 19.9995-20 19.9995-11.046 0-20.0005-8.9539-20.0005-19.9996" stroke="#30bced"/> <path d="m322.119 87.2264c0-11.0456 8.955-20 20-20 11.046 0 20 8.9544 20 20.0001 0 11.0457-8.954 19.9995-20 19.9995-11.045 0-20-8.9539-20-19.9996" stroke="#30bced"/> <path class="wheel" d="m92.3395 87.2264c0-11.0456 8.9545-20 20.0005-20 11.045 0 20 8.9544 20 20.0001 0 11.0457-8.955 19.9995-20 19.9995-11.046 0-20.0005-8.9539-20.0005-19.9996" stroke="#2696BF" stroke-dasharray="31.42"/> <path class="wheel" d="m322.119 87.2264c0-11.0456 8.955-20 20-20 11.046 0 20 8.9544 20 20.0001 0 11.0457-8.954 19.9995-20 19.9995-11.045 0-20-8.9539-20-19.9996" stroke="#2696BF" stroke-dasharray="31.42"/> </g> </svg> </div>
</div>
<h1>loading</h1> <script src="js/index.js"></script>
</body>
</html>CSSkateboard loading screen - Script Codes CSS Codes
#move { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(1250px, 40%); transform: translate(1250px, 40%); -webkit-animation: move 4s linear infinite; animation: move 4s linear infinite;
}
#board { width: 300px; height: 100px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-perspective: 400px; perspective: 400px;
}
svg { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; -webkit-animation: flip 4s linear infinite; animation: flip 4s linear infinite; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; .wheel { -webkit-animation: roll 600ms linear infinite; animation: roll 600ms linear infinite; }
}
h1 { font-size: 2.75rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #30bced;
}
@-webkit-keyframes move { 0% {-webkit-transform: translate(1250px, 40%);transform: translate(1250px, 40%)} 100% {-webkit-transform: translate(-1200px, 40%);transform: translate(-1200px, 40%)}
}
@keyframes move { 0% {-webkit-transform: translate(1250px, 40%);transform: translate(1250px, 40%)} 100% {-webkit-transform: translate(-1200px, 40%);transform: translate(-1200px, 40%)}
}
@-webkit-keyframes roll { 0% {stroke-dashoffset: 0} 100% {stroke-dashoffset: 250}
}
@keyframes roll { 0% {stroke-dashoffset: 0} 100% {stroke-dashoffset: 250}
}
@-webkit-keyframes flip { 0% {-webkit-transform: translateY(0) rotate(0) rotateX(0);transform: translateY(0) rotate(0) rotateX(0)} 40% {-webkit-transform: translateY(0) rotate(0) rotateX(0);transform: translateY(0) rotate(0) rotateX(0)} 42.5% {-webkit-transform: translateY(0) rotate(15deg) rotateX(30deg);transform: translateY(0) rotate(15deg) rotateX(30deg)} 47.5% {-webkit-transform: translateY(-110px) rotate(10deg) rotateX(160deg);transform: translateY(-110px) rotate(10deg) rotateX(160deg)} 50% {-webkit-transform: translateY(-110px) rotate(5deg) rotateX(260deg);transform: translateY(-110px) rotate(5deg) rotateX(260deg)} 55% {-webkit-transform: translateY(-105px) rotate(0deg) rotateX(340deg);transform: translateY(-105px) rotate(0deg) rotateX(340deg)} 57.5% {-webkit-transform: translateY(-100px) rotate(0deg) rotateX(360deg);transform: translateY(-100px) rotate(0deg) rotateX(360deg)} 60% {-webkit-transform: translateY(0) rotate(0deg) rotateX(360deg);transform: translateY(0) rotate(0deg) rotateX(360deg)} 100% {-webkit-transform: translateY(0) rotate(0deg) rotateX(360deg);transform: translateY(0) rotate(0deg) rotateX(360deg)}
}
@keyframes flip { 0% {-webkit-transform: translateY(0) rotate(0) rotateX(0);transform: translateY(0) rotate(0) rotateX(0)} 40% {-webkit-transform: translateY(0) rotate(0) rotateX(0);transform: translateY(0) rotate(0) rotateX(0)} 42.5% {-webkit-transform: translateY(0) rotate(15deg) rotateX(30deg);transform: translateY(0) rotate(15deg) rotateX(30deg)} 47.5% {-webkit-transform: translateY(-110px) rotate(10deg) rotateX(160deg);transform: translateY(-110px) rotate(10deg) rotateX(160deg)} 50% {-webkit-transform: translateY(-110px) rotate(5deg) rotateX(260deg);transform: translateY(-110px) rotate(5deg) rotateX(260deg)} 55% {-webkit-transform: translateY(-105px) rotate(0deg) rotateX(340deg);transform: translateY(-105px) rotate(0deg) rotateX(340deg)} 57.5% {-webkit-transform: translateY(-100px) rotate(0deg) rotateX(360deg);transform: translateY(-100px) rotate(0deg) rotateX(360deg)} 60% {-webkit-transform: translateY(0) rotate(0deg) rotateX(360deg);transform: translateY(0) rotate(0deg) rotateX(360deg)} 100% {-webkit-transform: translateY(0) rotate(0deg) rotateX(360deg);transform: translateY(0) rotate(0deg) rotateX(360deg)}
}CSSkateboard loading screen - Script Codes JS Codes
// none
| Developer | Nicolas Udy |
| Username | udyux |
| Uploaded | August 10, 2022 |
| Rating | 4.5 |
| Size | 4,482 Kb |
| Views | 38,456 |
Do you need developer help for CSSkateboard loading screen?
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!
Nicolas Udy (udyux) Script Codes
| Name | Size |
| Catching panels on scroll | 5,530 Kb |
| ES6 Game of Snek | 7,851 Kb |
| Pure CSS Gallery hover effect | 4,802 Kb |
| Reset | 4,318 Kb |
| SVG Draw-in effect | 7,226 Kb |
| Cursor based dynamic perspective logo | 4,228 Kb |
| Circle icons to text on hover | 4,353 Kb |
| Transforming hover buttons | 4,614 Kb |
| MiniMarkdown.JS | 7,647 Kb |
| Automatic SVG Pie-Charts | 4,466 Kb |
Create amazing web content 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!
Similar Scripts & Codes
| Name | Username | Size |
| Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
| See Through | Larrygeams | 77,410 Kb |
| RAQuote | Naderk007 | 4,412 Kb |
| JQuery Validate checkbox group | Lunaman | 2,466 Kb |
| Bootstrap example | Ssaakkaa | 2,716 Kb |
| LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
| Mostly Fluid | Mccreath | 3,308 Kb |
| Sidebar Thing | Jonambas | 2,779 Kb |
| Horizontal scroll fixed element | HerrSerker | 0 Kb |
| CLE_Old_March | Saritaleroux | 6,234 Kb |
Do you want hide your ip address?
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!