How we can create a 3D perspective loading/progress bar using normal HTML CSS JS? Solution: See this 3D Progress Bar Animation with CSS JavaScript, Perspective Loading Bar.
Previously I have shared many progress bars related programs, but this is a three-dimensional perspective loading bar animation. Basically, a progress bar visualizes the progression of the operation. Also, we know as a loading bar, it helps to identify the loaded part and how much part is left. We can style or customize the bar in many ways, like gradient, image fill, 3D perspective, etc.
Today you will learn to create Perspective Loading Bar using HTML, CSS, and JavaScript. Basically, there are 2 progress bars with the same effect and animation. Two bars to show the straight bar and the perspective bar. When you will click on the bar it will switch to 3D perspective shape. There is a toggle effect to switch between normal and perspective. At the bottom, you will see a text “Restart” to restarting the loading fill animation.
So, Today I am sharing 3D Progress Bar Animation with CSS JavaScript. There I have used CSS to create the whole program, but the restart animation function based on JavaScript. This will a pure CSS program if we remove the restart button. The program is an excellent example of how we can create amazing things using only HTML and CSS. You can use this progress bar on your website to show the process to users.
If you are thinking now how this animated perspective loading bar actually is, then see the preview given below.
Preview Of Perspective Loading Bar
See this video preview to getting an idea of how this loading bar animation looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- 3D Perspective Image Slider
- Rotating Cuboid Form
- Card Flip Reflection Effect
- Bootstrap Responsive Menu Bar
3D Progress Bar Animation with CSS JavaScript Source Code
Before sharing source code, let’s talk about it. First I have created a label with class name “loading” and put an input, div, two spans, and a list inside it. The spans for the texts and the list has 11 items for perspective view. And the input is checkbox type to switch the bar’s style. I have copied and pasted the same block of codes for creating the 2nd bar, but the checkbox input is checked for show perspective view by default. Also, placed a hyperlink tag to restart function.
Now using CSS I have placed all the items in the right place, as you can see in the preview. There I have used CSS variables ( --var ) to store and pass data easily, also it helps in the calculation. I have placed and stylize each list item to creating the perspective model. For selecting list items separately, I used CSS nth-child() command. I also used the transform command and @keyframe to create the animation.
JavaScript handling here only the restart feature in this program. Used JS querySelectorAll() command to select all elements as a selector, and used .addEventListener command to detect click. Left all other things you will understand after getting the whole source code, I can’t explain all things here.
For creating this program, you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this program without any trouble.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
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 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>3D Progress Bar | Webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap'> <link rel="stylesheet" href="style.css"> </head> <body> <label class="loading"> <input type="checkbox"> <div> <span>Loading...</span> <span>Click To Switch</span> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </label> <label class="loading"> <input type="checkbox" checked> <div> <span>Loading...</span> <span>Click To Switch</span> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </label> <a href="" class="restart"> Restart </a> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 |
/* <!--Code By Webdevtrick ( https://webdevtrick.com )--> */ html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; display: flex; font-family: 'Roboto', Arial; justify-content: center; align-items: center; flex-direction: column; background: #F6F8FF; } .loading { --load: 10000ms; --border: #646B8C; --background: #fff; --background-perspective: #F6F8FF; --fill: #ff4d4d; margin: 52px 0; } .loading > div { -webkit-transform: perspective(var(--p, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform: perspective(var(--p, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; cursor: pointer; } .loading > div span { display: block; color: var(--c, #404660); line-height: 23px; font-size: var(--s, 16px); font-weight: 500; margin-bottom: 8px; } .loading > div span:nth-child(2) { --c: #BBC1E1; --s: 14px; position: absolute; top: 100%; left: 0; margin-top: 8px; } .loading > div ul { width: 360px; height: 36px; margin: 0; padding: 0; list-style: none; } .loading > div ul li { --ry: 0deg; --z: 0; --x: 0; position: absolute; bottom: 0; background: var(--b, var(--background)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); width: var(--w, 200px); left: var(--l, 0); height: 36px; -webkit-transform: rotateY(var(--ry)) translateZ(var(--z)) translateX(var(--x)); transform: rotateY(var(--ry)) translateZ(var(--z)) translateX(var(--x)); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .loading > div ul li:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--fill); -webkit-transform-origin: var(--o, 0) 0; transform-origin: var(--o, 0) 0; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-animation: fill var(--duration) linear forwards var(--delay); animation: fill var(--duration) linear forwards var(--delay); } .loading > div ul li:nth-child(1) { --delay: 0ms; --duration: calc(var(--load) * calc(200 / 960)); border-left: 1px solid var(--border); } .loading > div ul li:nth-child(2) { --delay: calc(var(--load) * calc(200 / 960)); --duration: calc(var(--load) * calc(100 / 960)); --w: 100px; --l: 200px; --ry: 90deg; --b: var(--background-perspective); } .loading > div ul li:nth-child(3) { --delay: calc(calc(var(--load) * calc(200 / 960)) + calc(var(--load) * calc(100 / 960))); --duration: calc(var(--load) * calc(32 / 960)); --w: 32px; --l: 200px; --z: -100px; } .loading > div ul li:nth-child(4) { --delay: calc(calc(var(--load) * calc(200 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(32 / 960))); --duration: calc(var(--load) * calc(100 / 960)); --w: 100px; --l: 232px; --ry: 90deg; --o: 100%; --b: var(--background-perspective); } .loading > div ul li:nth-child(5) { --delay: calc(calc(var(--load) * calc(200 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(32 / 960)) + calc(var(--load) * calc(100 / 960))); --duration: calc(var(--load) * calc(20 / 960)); --w: 20px; --l: 232px; } .loading > div ul li:nth-child(6) { --delay: calc(calc(var(--load) * calc(200 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(32 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(20 / 960))); --duration: calc(var(--load) * calc(140 / 960)); --w: 140px; --l: 252px; --ry: 90deg; --b: var(--background-perspective); } .loading > div ul li:nth-child(7) { --delay: calc(calc(var(--load) * calc(200 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(32 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(20 / 960)) + calc(var(--load) * calc(140 / 960))); --duration: calc(var(--load) * calc(24 / 960)); --w: 24px; --l: 252px; --z: -140px; } .loading > div ul li:nth-child(8) { --delay: calc(calc(var(--load) * calc(200 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(32 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(20 / 960)) + calc(var(--load) * calc(140 / 960)) + calc(var(--load) * calc(24 / 960))); --duration: calc(var(--load) * calc(200 / 960)); --w: 200px; --l: 276px; --ry: 90deg; --x: -60px; --o: 100%; --b: var(--background-perspective); } .loading > div ul li:nth-child(9) { --delay: calc(calc(var(--load) * calc(200 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(32 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(20 / 960)) + calc(var(--load) * calc(140 / 960)) + calc(var(--load) * calc(24 / 960)) + calc(var(--load) * calc(200 / 960))); --duration: calc(var(--load) * calc(48 / 960)); --w: 48px; --l: 276px; --z: 60px; } .loading > div ul li:nth-child(10) { --delay: calc(calc(var(--load) * calc(200 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(32 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(20 / 960)) + calc(var(--load) * calc(140 / 960)) + calc(var(--load) * calc(24 / 960)) + calc(var(--load) * calc(200 / 960)) + calc(var(--load) * calc(48 / 960))); --duration: calc(var(--load) * calc(60 / 960)); --w: 60px; --l: 324px; --ry: 90deg; --x: -60px; --b: var(--background-perspective); } .loading > div ul li:nth-child(11) { --delay: calc(calc(var(--load) * calc(200 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(32 / 960)) + calc(var(--load) * calc(100 / 960)) + calc(var(--load) * calc(20 / 960)) + calc(var(--load) * calc(140 / 960)) + calc(var(--load) * calc(24 / 960)) + calc(var(--load) * calc(200 / 960)) + calc(var(--load) * calc(48 / 960)) + calc(var(--load) * calc(60 / 960))); --duration: calc(var(--load) * calc(36 / 960)); --w: 36px; --l: 324px; border-right: 1px solid var(--border); } .loading input { display: none; } .loading input:checked + div { --rx: -16deg; --ry: -24deg; --p: 600px; } @-webkit-keyframes fill { to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes fill { to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .restart { display: table; position: absolute; margin-top: 10%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-decoration: none; line-height: 23px; font-size: 14px; font-weight: 900; color: #212121; } .restart svg { margin: 4px 4px 0 0; width: 16px; height: 16px; display: inline-block; vertical-align: top; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Code By Webdevtrick ( https://webdevtrick.com ) const $ = (s, o = document) => o.querySelector(s); const $$ = (s, o = document) => o.querySelectorAll(s); $('.restart').addEventListener('click', e => { e.preventDefault(); $$('.loading').forEach(elem => { elem.parentNode.replaceChild(elem.cloneNode(true), elem); }); }); |
That’s It. Now you have successfully created 3D Progress Bar Animation with CSS JavaScript, Perspective Loading Bar. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Hi
You have very good quality of code and fantastic demos, but your website remembering me 90’s design. Please improve this in future like tympanus, smashingmagazine …
Appreciating your hard work. 🙂
[…] rosquilla barras . Estas barras circulares sirven para mostrar la progresión de segundos, minutos, horas y todo el […]