Loading animation

Developer
Niels Oeltjen
Size
2,298 Kb
Views
20,240
  1. Loading animation Previews
  2. Loading animation HTML Codes
  3. Loading animation CSS Codes
  4. Loading animation JS Codes

How do I make an loading animation?

Simple, clean. Please click that like button so I can win some cool stuff :-). What is a loading animation? How do you make a loading animation? This script and codes were developed by Niels Oeltjen on 08 September 2022, Thursday.

Loading animation Previews
IQ Test

Loading animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://codepen.io/NielsOeltjen/pen/mWqKev.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="block"> <div class="initial"> <span>L</span><span>o</span><span>a</span><span>d</span><span>i</span><span>n</span><span>g</span><span>.</span><span>.</span><span>.</span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Loading animation - Script Codes CSS Codes

/* layout */
.block { text-align: center;
}
.block:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */
}
.block div { display: inline-block; vertical-align: middle;
}
body, html, .block { height: 100%;
}
/* Fonts */
body { text-transform: uppercase;
}
/* Loader */
.block div span { position: relative; -webkit-transition: top 400ms ease; transition: top 400ms ease; display: inline-block; width: 4em; height: 4em; line-height: 4em; background: #decaff; color: #555; text-align: center;
}
/* L */
.count-9 span:nth-child(1) { top: -8px;
}
.count-9 span:nth-child(2) { top: -3px;
}
/* O */
.count-8 span:nth-child(2) { top: -8px;
}
.count-8 span:nth-child(3) { top: -3px;
}
/* A */
.count-7 span:nth-child(3) { top: -8px;
}
.count-7 span:nth-child(4) { top: -3px;
}
/* D */
.count-6 span:nth-child(4) { top: -8px;
}
.count-6 span:nth-child(5) { top: -3px;
}
/* I */
.count-5 span:nth-child(5) { top: -8px;
}
.count-5 span:nth-child(6) { top: -3px;
}
/* N */
.count-4 span:nth-child(6) { top: -8px;
}
.count-4 span:nth-child(7) { top: -3px;
}
/* G */
.count-3 span:nth-child(7) { top: -8px;
}
.count-3 span:nth-child(8) { top: -3px;
}
/* .(1) */
.count-2 span:nth-child(8) { top: -8px;
}
.count-2 span:nth-child(9) { top: -3px;
}
/* .(2) */
.count-1 span:nth-child(9) { top: -8px;
}
.count-1 span:nth-child(10) { top: -3px;
}
/* .(3) */
.count-0 span:nth-child(10) { top: -8px;
}

Loading animation - Script Codes JS Codes

function countdown() { var loader = $('.block div'); var count = 10; var timerId = setInterval( function() { // Decrement count--; // Switch 0 to 10 if(count == 0) { count = 10; } // Switch class loader .removeClass() .addClass('count-'+count); }, 200);
}
countdown();
Loading animation - Script Codes
Loading animation - Script Codes
Home Page Home
Developer Niels Oeltjen
Username NielsOeltjen
Uploaded September 08, 2022
Rating 3
Size 2,298 Kb
Views 20,240
Do you need developer help for Loading animation?

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!

Niels Oeltjen (NielsOeltjen) Script Codes
Name
Sweet star loader
Prototype for a menu pattern
Animated background colours
Emoji selectors
Expanding text links
Paralax without plugin
Text as background
Simple spinner
CSS only audio player UI
Sun
Create amazing love letters 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!