Hello Coders, today I will show you something which is very impressive for our website. Which is entertain your website visitors. This is pure CSS preloader which you can use for your site to increase website speed and optimization.
go below for a live view
So let’s start,
Loading.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="loading.css"> </head> <body> <section> <video src="Smoke.mp4" autoplay muted loop></video> <ul> <li>P</li> <li>H</li> <li>P</li> <li>C</li> <li>O</li> <li>D</li> <li>E</li> <li>R</li> <li>T</li> <li>E</li> <li>C</li> <li>H</li> </ul> </section> </body> </html> |
Here is the main file, CSS file,
Check Out: Infinite Loader Using HTML and CSS
loading.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
section{ height:100vh; background: #000; } section:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, red , yellow,#FF8700, yellow, red); mix-blend-mode: color; pointer-events: none; } video{ object-fit: cover; height: 100%; width: 100%; } body{ margin: 0; padding:0; font-family: sans-serif; font-weight: bold; background:#f7f7f7; } ul{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; padding: 0; display: flex; } ul li{ list-style: none; font-size: 5em; letter-spacing: 20px; animation: animate 3s linear infinite; } @keyframes animate{ 0%{ transform: translateX(-50px); letter-spacing: 20px; opacity: 0; color: white; } 10%{ opacity: 1; } 50%{ letter-spacing: -20px; opacity: 1; } 100%{ transform: translateX(50px); letter-spacing: 20px; opacity: 0; color: #00f; } } ul li:nth-child(1){ animation-delay: 0s; } ul li:nth-child(2){ animation-delay: .2s; } ul li:nth-child(3){ animation-delay: .4s; } ul li:nth-child(4){ animation-delay: .6s; } ul li:nth-child(5){ animation-delay: .8s; } ul li:nth-child(6){ animation-delay: 1s; } ul li:nth-child(7){ animation-delay: 1.2s; } ul li:nth-child(8){ animation-delay: 1.4s; } ul li:nth-child(9){ animation-delay: 1.6s; } ul li:nth-child(10){ animation-delay: 1.8s; } ul li:nth-child(11){ animation-delay: 2s; } ul li:nth-child(12){ animation-delay: 2.2s; } |
This is the complete code of the pure CSS loading. If you have any query or any improvement please comment below.
See the Pen
Pure CSS animated Preloader by Bikash Panda (@phpcodertech)
on CodePen.
https://static.codepen.io/assets/embed/ei.js
Was this article helpful?
YesNo
Great blog here! Also your web site loads up
very fast! What web host are you using? Can I get your affiliate link to your host?
I wish my website loaded up as fast as yours lol
Thanks.
Here is the hosting link Hotinger