├── preview.png
├── README.md
├── assets
├── js
│ └── main.js
├── css
│ └── styles.css
└── scss
│ └── styles.scss
└── index.html
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/loading-animation-dots/HEAD/preview.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 💥 Loading Dots Animation Effects
2 | ## [Watch it on youtube](https://youtu.be/LXE9_ur24ys)
3 | ### 💥 Loading Dots Animation Effects
4 |
5 | - Loading Dots Animation Effects With HTML CSS & JavaScript
6 | - With animation Dots.
7 | - With a simple and minimalist interface.
8 |
9 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode)
10 |
11 | 
12 |
--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
1 | /*=============== ANIMATED DOTS JS ===============*/
2 | const dots = document.querySelector('.loading__dots')
3 |
4 | const addAnimate = () =>{
5 | /* Add animate class */
6 | dots.classList.add('animate')
7 |
8 | setTimeout(() =>{
9 | /* Remove animate class */
10 | dots.classList.remove('animate')
11 |
12 | setTimeout(() =>{
13 | /* Run the function again */
14 | addAnimate()
15 | }, 100)
16 | }, 2600)
17 | }
18 | addAnimate()
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Loading animation dots - Bedimcode
11 |
12 |
13 |
14 | Loading
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
1 | /*=============== GOOGLE FONTS ===============*/
2 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap");
3 | /*=============== VARIABLES CSS ===============*/
4 | :root {
5 | /*========== Colors ==========*/
6 | --body-color: hsl(0, 0%, 96%);
7 | --text-color: hsl(0, 0%, 12%);
8 | /*========== Font and typography ==========*/
9 | --body-font: "Inter", sans-serif;
10 | --loading-font-size: 2rem;
11 | }
12 |
13 | /*=============== LOADING ===============*/
14 | * {
15 | box-sizing: border-box;
16 | padding: 0;
17 | margin: 0;
18 | }
19 |
20 | body {
21 | height: 100vh;
22 | display: grid;
23 | place-items: center;
24 | background-color: var(--body-color);
25 | overflow: hidden;
26 | }
27 |
28 | .loading {
29 | color: var(--text-color);
30 | font-size: var(--loading-font-size);
31 | font-family: var(--body-font);
32 | }
33 | .loading__dots {
34 | display: inline-flex;
35 | column-gap: 0.25rem;
36 | }
37 | .loading__dot {
38 | position: relative;
39 | width: 8px;
40 | height: 8px;
41 | background-color: var(--text-color);
42 | border-radius: 50%;
43 | }
44 | .loading__dot:nth-child(1) {
45 | position: absolute;
46 | transform: scale(0);
47 | }
48 | .loading__dot:nth-child(4) {
49 | background: transparent;
50 | }
51 | .loading__dot-down {
52 | display: block;
53 | width: 8px;
54 | height: 8px;
55 | background-color: var(--text-color);
56 | border-radius: 50%;
57 | transform: translate(0);
58 | }
59 |
60 | /* Add animated class */
61 | .animate .loading__dot:nth-child(1) {
62 | animation: scale-dot 0.8s 0.2s forwards;
63 | }
64 | .animate .loading__dot:nth-child(2), .animate .loading__dot:nth-child(3) {
65 | animation: move-right 0.6s forwards;
66 | }
67 | .animate .loading__dot-down {
68 | animation: move-right-down 0.8s 0.2s forwards linear, move-down 2.8s 0.3s forwards ease-in;
69 | }
70 |
71 | /* Animated dot 1 */
72 | @keyframes scale-dot {
73 | 100% {
74 | transform: scale(1);
75 | }
76 | }
77 | /* Animated dot 2 & 3*/
78 | @keyframes move-right {
79 | 100% {
80 | transform: translateX(0.75rem);
81 | }
82 | }
83 | /* Animated dot 4 */
84 | @keyframes move-right-down {
85 | 50% {
86 | transform: translate(1.5rem, 0.25rem);
87 | }
88 | 100% {
89 | transform: translate(2rem, 0.5rem);
90 | }
91 | }
92 | @keyframes move-down {
93 | 100% {
94 | transform: translate(10rem, 80vh);
95 | }
96 | }
--------------------------------------------------------------------------------
/assets/scss/styles.scss:
--------------------------------------------------------------------------------
1 | /*=============== GOOGLE FONTS ===============*/
2 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap');
3 |
4 | /*=============== VARIABLES CSS ===============*/
5 | :root{
6 | /*========== Colors ==========*/
7 | --body-color: hsl(0, 0%, 96%);
8 | --text-color: hsl(0, 0%, 12%);
9 |
10 | /*========== Font and typography ==========*/
11 | --body-font: 'Inter', sans-serif;
12 | --loading-font-size: 2rem;
13 | }
14 |
15 | /*=============== LOADING ===============*/
16 | *{
17 | box-sizing: border-box;
18 | padding: 0;
19 | margin: 0;
20 | }
21 |
22 | body{
23 | height: 100vh;
24 | display: grid;
25 | place-items: center;
26 | background-color: var(--body-color);
27 | overflow: hidden;
28 | }
29 |
30 | .loading{
31 | color: var(--text-color);
32 | font-size: var(--loading-font-size);
33 | font-family: var(--body-font);
34 |
35 | &__dots{
36 | display: inline-flex;
37 | column-gap: .25rem;
38 | }
39 | &__dot{
40 | position: relative;
41 | width: 8px;
42 | height: 8px;
43 | background-color: var(--text-color);
44 | border-radius: 50%;
45 |
46 | &:nth-child(1){
47 | position: absolute;
48 | transform: scale(0);
49 | }
50 | &:nth-child(4){
51 | background: transparent;
52 | }
53 | &-down{
54 | display: block;
55 | width: 8px;
56 | height: 8px;
57 | background-color: var(--text-color);
58 | border-radius: 50%;
59 | transform: translate(0);
60 | }
61 | }
62 | }
63 |
64 | /* Add animated class */
65 | .animate{
66 | .loading__dot{
67 | &:nth-child(1){
68 | animation: scale-dot .8s .2s forwards;
69 | }
70 | &:nth-child(2),
71 | &:nth-child(3){
72 | animation: move-right .6s forwards;
73 | }
74 | &-down{
75 | animation: move-right-down .8s .2s forwards linear,
76 | move-down 2.8s .3s forwards ease-in;
77 | }
78 | }
79 | }
80 |
81 | /* Animated dot 1 */
82 | @keyframes scale-dot{
83 | 100%{
84 | transform: scale(1);
85 | }
86 | }
87 |
88 | /* Animated dot 2 & 3*/
89 | @keyframes move-right{
90 | 100%{
91 | transform: translateX(.75rem);
92 | }
93 | }
94 |
95 | /* Animated dot 4 */
96 | @keyframes move-right-down{
97 | 50%{
98 | transform: translate(1.5rem, .25rem);
99 | }
100 | 100%{
101 | transform: translate(2rem, .5rem);
102 | }
103 | }
104 |
105 | @keyframes move-down{
106 | 100%{
107 | transform: translate(10rem, 80vh);
108 | }
109 | }
--------------------------------------------------------------------------------