Loading Animation Created With Pure CSS

CSS Loading Animation is a set of pretty cool loading animations that can be used as loading spinners when loading content into a document.

Must Read: A Simple Infinite Image Carousel Using Pure Javascript

How to make use of it:

1. Add the loader to the webpage.

<div class="loading-wrapper">
  <div class="loading-devover">
  <div class="img">
    // Add Image Here
<div class="loading-wrapper d-flex align-items-center justify-content-center">
  <div class="loading-bar"></div>
<div class="loading-wrapper2">
  <div class="loading-bar1"></div>
  <div class="loading-bar2"></div>
  <div class="loading-bar3"></div>
<div class="loading-wrapper">
  <div class="loading-pouring">
<div class="loading-wrapper d-flex justify-content-center">
  <div class="loading-bouncing ">
     // Add Image Here
<!-- PULSE -->
<div class="loading-wrapper d-flex justify-content-center align-items-center">
  <div class="loading-pulse ">
    // Add Image Here

Must Read: Realistic IOS Web Based in Pure CSS / HTML | Web iOS Mockup

See Demo And Download

Official Website(zuramai): Click Here

This superior jQuery/javascript plugin is developed by zuramai. For extra Advanced Usage, please go to the official website.

Related Posts


[Offcanvas] Simple and Modern Multi-Level Sidebar Menu on Bootstrap 4

The multi-level sidebar menu is simple and fast on Bootstrap. So you must be aware of how to use Bootstrap itself. This plugin is fast, responsive, multi-level,…


Flip Sliding Carousel Gallery Made Of CSS And Vanilla JS

Vanilla JS Carousel is a JavaScript Slider plugin for navigating objects in a 3D space just like Cover Flow. Getting started Clone or download the repo. Open…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…


Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…


Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…

Leave a Reply

Your email address will not be published. Required fields are marked *