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.

<!-- SPINNER WITH LOGO -->
<div class="loading-wrapper">
  <div class="loading-devover">
  </div>
  <div class="img">
    // Add Image Here
  </div>
</div>
<!-- VERTICAL BARS -->
<div class="loading-wrapper d-flex align-items-center justify-content-center">
  <div class="loading-bar"></div>
</div>
<!-- HORIZONTAL BARS -->
<div class="loading-wrapper2">
  <div class="loading-bar1"></div>
  <div class="loading-bar2"></div>
  <div class="loading-bar3"></div>
</div>
<!-- WATER FILLING -->
<div class="loading-wrapper">
  <div class="loading-pouring">
  </div>
</div>
<!-- LOGO BOUNCING -->
<div class="loading-wrapper d-flex justify-content-center">
  <div class="loading-bouncing ">
     // Add Image Here
  </div>
</div>
<!-- PULSE -->
<div class="loading-wrapper d-flex justify-content-center align-items-center">
  <div class="loading-pulse ">
    // Add Image Here
  </div>
</div>

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

Simple-and-Modern-Multi-Level-Sidebar-Menu-on-Bootstrap-4

[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,…

vanilla-js-carousel

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…

bootstrap-5-dark-theme

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-dialog-plugin

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…

Lightweight-Flexbox-Carousel-Plugin

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…

bootstrap-5-multi-level-dropdown

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 *