Loader Animation | HTML CSS

Показать описание

#shorts #short #html #css #tutorials #trending

Sound effects from Pixabay.

Learning Axis

Рекомендации по теме

Комментарии

Amazing! I have practiced and made as it is.

mdashif-ozgp

<!DOCTYPE html>
<html lang="en">
<head>
<title>Loader Animation</title>

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
--bg-color: radial-gradient(#003, #000);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-color);
}

.box{
position: relative;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
}
.box span {
position: absolute;
width: 10px;
height: 250px;
background: transparent;
border-bottom: 40px solid transparent;
transform-origin: bottom;
transform: rotate(calc(22.5deg * var(--i)));
}
.box span::before{
content: "";
position: absolute;
width: 100%;
height: 50px;
background: #0af;
box-shadow: 0 0 20px #0af;
border-radius: 10px;
animation: animate 1.5s linear infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate {
0% {
transform: translateY(160px) rotate(-45deg);
filter: hue-rotate(0deg);
}
50% {
transform: translateY(90px);
}
100% {
transform: translateY(160px) rotate(45deg);
filter: hue-rotate(360deg);
}
}

</style>
</head>
<body>
<div class="box">
















</div>
</body>

</html>

mdashif-ozgp

Loader Animation | HTML CSS

How To Create Skeleton Loading Animation With CSS

CSS Preloaders | 15 Stunning CSS Loading Animation examples for your website

Creative CSS Loading Animation | CSS Animation Tutorial

Quick SVG Loader Animation Effects | CSS Animation

20 Creative HTML CSS Loading Animation Preloaders Must See

Page Loader in HTML: How to make Animated Page Loader using HTML CSS | CSS Spinner Animation

Loading Animation using HTML CSS & Javascript | Animated Progress Bar

How to Create a CSS Page Loading Spinner - Web Design Tutorial

How to Create Neon Loading Animation with HTML and CSS

How To Make Website Preloader Using HTML CSS JS | Page Loading, Website Loading Animation

Loading Animation using HTML & CSS | CSS Loading Spinner

CSS Preloaders | 13 CSS Loading Animation & Spinners Examples For Your Website

How To Animate Page Loading With CSS

Color Changing Shiny Loader using HTML & CSS

How to Add Loading Animation to Website in 2 Minutes!

Four Dots Loading Animation CSS || Html &css 🔥

How to make a Loader in HTML & CSS | Website Loading Animation

Quick CSS Loading Animation | Html CSS Animation Effects (Short Tutorial) #html #css #shorts

Creative CSS Loading Animations Effects | CSS Animation Tutorial for Beginners

Loading Page With SVG Animation Using CSS & GSAP

CSS Animation! | Bubble Animated Loading Screen in CSS | WebKitCoding

Building a CSS Loading Spinner in 3 Minutes

Animated Loader using HTML & CSS

Progress Bar Loading Animation Using Only HTML & CSS