├── README.md
├── assets
├── css
│ └── style.css
└── js
│ └── app.js
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | ## Loading Animation Using JavaScript
2 | ****
3 | ### Using Tools
4 | * HTML:5
5 | * CSS
6 | * JavaScript
7 |
8 | ### Using JavaScript
9 | * setInterval
10 |
11 | ### Live Website Link
12 | Click
13 |
--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | overflow: hidden;
4 | }
5 | body {
6 | background-color: #141414;
7 | height: 100vh;
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | flex-direction: column;
12 | }
13 | .animationLoader {
14 | width: 400px;
15 | }
16 | .animationLoader .loaderPercent {
17 | font-size: 60px;
18 | color: white;
19 | font-weight: 700;
20 | text-align: center;
21 | margin: 0;
22 | padding: 4px 0px;
23 | }
24 | .animationLoader .loaderDiv {
25 | background-color: #101211;
26 | height: 28px;
27 | border-radius: 15px;
28 | }
29 |
30 | .loader {
31 | background-color: #ff2755;
32 | border-radius: 15px;
33 | height: 28px;
34 | line-height: 28px;
35 | font-size: 20px;
36 | text-align: center;
37 | color: white;
38 | }
39 |
--------------------------------------------------------------------------------
/assets/js/app.js:
--------------------------------------------------------------------------------
1 | const loaderPercent = document.querySelector(".loaderPercent");
2 | const loader = document.getElementById("loader");
3 | let percent = 0;
4 | const clear = setInterval(() => {
5 | loader.style.width = `${percent}%`;
6 | if (percent == 100) {
7 | loader.innerHTML = "Completed!";
8 | clearInterval(clear);
9 | }
10 | loaderPercent.innerHTML = `${percent}%`;
11 | percent++;
12 | }, 40);
13 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Loading animation
9 |
10 |
11 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------