EN
JavaScript - create custom animated loader
14 points
In this article, we would like to show you how to create a custom animated loader in JavaScript.
Note: this source code has been splitted in to separated files in second example to make it easier to read.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.loadable-content {7
position: relative;8
}9
10
.content-cover {11
position: absolute;12
left: 0; top: 0; right: 0; bottom: 0;13
background: rgba(0, 0, 0, 0.2);14
z-index: 1000000;15
}16
17
.content-loader {18
margin: -55px 0 0 -55px;19
position: absolute;20
left: 50%; top: 50%;21
border-radius: 50%;22
background: rgba(255, 255, 255, 0.1);23
width: 110px; height: 110px;24
}25
26
.content-loader-item {27
position: absolute;28
left: 45px; top: 45px;29
border-radius: 50%;30
background: silver;31
width: 20px; height: 20px;32
color: red;33
}34
35
.content-loader-item:nth-child(1) {36
transform: rotate(0deg) translate(0, 40px);37
animation: content-loader-item-animation infinite 2s 0.125s linear;38
}39
40
.content-loader-item:nth-child(2) {41
transform: rotate(45deg) translate(0, 40px);42
animation: content-loader-item-animation infinite 2s 0.250s linear;43
}44
45
.content-loader-item:nth-child(3) {46
transform: rotate(90deg) translate(0, 40px);47
animation: content-loader-item-animation infinite 2s 0.375s linear;48
}49
50
.content-loader-item:nth-child(4) {51
transform: rotate(135deg) translate(0, 40px);52
animation: content-loader-item-animation infinite 2s 0.500s linear;53
}54
55
.content-loader-item:nth-child(5) {56
transform: rotate(180deg) translate(0, 40px);57
animation: content-loader-item-animation infinite 2s 0.625s linear;58
}59
60
.content-loader-item:nth-child(6) {61
transform: rotate(225deg) translate(0, 40px);62
animation: content-loader-item-animation infinite 2s 0.750s linear;63
}64
65
.content-loader-item:nth-child(7) {66
transform: rotate(270deg) translate(0, 40px);67
animation: content-loader-item-animation infinite 2s 0.875s linear;68
}69
70
.content-loader-item:nth-child(8) {71
transform: rotate(315deg) translate(0, 40px);72
animation: content-loader-item-animation infinite 2s 1.000s linear;73
}74
75
@keyframes content-loader-item-animation {76
0.0% {77
background: #b5b5b5;78
}79
80
20.0% {81
background: #808080;82
}83
84
25.0% {85
background: #c0c0c0;86
}87
88
100.0% {89
background: #c0c0c0;90
}91
}92
93
</style>94
<script>95
96
'use strict';97
98
(function(window) {99
window.Loader = function() {100
var container = document.createElement('div');101
102
container.innerHTML = '' +103
'<div class="content-cover">\n' +104
' <div class="content-loader">\n' +105
' <div class="content-loader-item"></div>\n' +106
' <div class="content-loader-item"></div>\n' +107
' <div class="content-loader-item"></div>\n' +108
' <div class="content-loader-item"></div>\n' +109
' <div class="content-loader-item"></div>\n' +110
' <div class="content-loader-item"></div>\n' +111
' <div class="content-loader-item"></div>\n' +112
' <div class="content-loader-item"></div>\n' +113
' </div>\n' +114
'</div>';115
116
var element = container.firstChild;117
118
this.show = function(parent, placeholder) {119
parent.insertBefore(element, placeholder);120
};121
122
this.hide = function() {123
var parent = element.parentNode;124
125
if(parent) {126
parent.removeChild(element);127
}128
};129
};130
})(window);131
132
</script>133
</head>134
<body>135
<style>136
137
#container {138
border: 1px solid red; 139
height: 150px;140
}141
142
</style>143
144
<div id="container" class="loadable-content">145
This is some text...<br />146
This is some text...<br />147
This is some text...<br />148
This is some text...<br />149
This is some text...<br />150
This is some text...151
</div>152
153
<br />154
155
<div>156
<button onclick="turnOnLoader()">Turn ON loader</button>157
<button onclick="turnOffLoader()">Turn OFF loader</button>158
</div>159
160
<script>161
162
var container = document.querySelector('#container');163
var loader = new Loader();164
165
function turnOnLoader() {166
loader.show(container);167
}168
169
function turnOffLoader() {170
loader.hide();171
}172
173
</script>174
</body>175
</html>index.htm file:
xxxxxxxxxx1
2
<html>3
<head>4
<link rel="stylesheet" type="text/css" href="loader.css" />5
<script src="loader.js"></script>6
</head>7
<body>8
<style>9
10
#container {11
border: 1px solid red; 12
height: 150px;13
}14
15
</style>16
17
<div id="container" class="loadable-content">18
This is some text...<br />19
This is some text...<br />20
This is some text...<br />21
This is some text...<br />22
This is some text...<br />23
This is some text...24
</div>25
26
<br />27
28
<div>29
<button onclick="turnOnLoader()">Turn ON loader</button>30
<button onclick="turnOffLoader()">Turn OFF loader</button>31
</div>32
33
<script>34
35
var container = document.querySelector('#container');36
var loader = new Loader();37
38
function turnOnLoader() {39
loader.show(container);40
}41
42
function turnOffLoader() {43
loader.hide();44
}45
46
</script>47
</body>48
</html>Result:
loader.js file:
xxxxxxxxxx1
'use strict';2
3
(function(window) {4
window.Loader = function() {5
var container = document.createElement('div');6
7
container.innerHTML = '' +8
'<div class="content-cover">\n' +9
' <div class="content-loader">\n' +10
' <div class="content-loader-item"></div>\n' +11
' <div class="content-loader-item"></div>\n' +12
' <div class="content-loader-item"></div>\n' +13
' <div class="content-loader-item"></div>\n' +14
' <div class="content-loader-item"></div>\n' +15
' <div class="content-loader-item"></div>\n' +16
' <div class="content-loader-item"></div>\n' +17
' <div class="content-loader-item"></div>\n' +18
' </div>\n' +19
'</div>';20
21
var element = container.firstChild;22
23
this.show = function(parent, placeholder) {24
parent.insertBefore(element, placeholder);25
};26
27
this.hide = function() {28
var parent = element.parentNode;29
30
if(parent) {31
parent.removeChild(element);32
}33
};34
};35
})(window);loader.css file:
xxxxxxxxxx1
2
.loadable-content {3
position: relative;4
}5
6
.content-cover {7
position: absolute;8
left: 0; top: 0; right: 0; bottom: 0;9
background: rgba(0, 0, 0, 0.2);10
z-index: 1000000;11
}12
13
.content-loader {14
margin: -55px 0 0 -55px;15
position: absolute;16
left: 50%; top: 50%;17
border-radius: 50%;18
background: rgba(255, 255, 255, 0.1);19
width: 110px; height: 110px;20
}21
22
.content-loader-item {23
position: absolute;24
left: 45px; top: 45px;25
border-radius: 50%;26
background: silver;27
width: 20px; height: 20px;28
color: red;29
}30
31
.content-loader-item:nth-child(1) {32
transform: rotate(0deg) translate(0, 40px);33
animation: content-loader-item-animation infinite 2s 0.125s linear;34
}35
36
.content-loader-item:nth-child(2) {37
transform: rotate(45deg) translate(0, 40px);38
animation: content-loader-item-animation infinite 2s 0.250s linear;39
}40
41
.content-loader-item:nth-child(3) {42
transform: rotate(90deg) translate(0, 40px);43
animation: content-loader-item-animation infinite 2s 0.375s linear;44
}45
46
.content-loader-item:nth-child(4) {47
transform: rotate(135deg) translate(0, 40px);48
animation: content-loader-item-animation infinite 2s 0.500s linear;49
}50
51
.content-loader-item:nth-child(5) {52
transform: rotate(180deg) translate(0, 40px);53
animation: content-loader-item-animation infinite 2s 0.625s linear;54
}55
56
.content-loader-item:nth-child(6) {57
transform: rotate(225deg) translate(0, 40px);58
animation: content-loader-item-animation infinite 2s 0.750s linear;59
}60
61
.content-loader-item:nth-child(7) {62
transform: rotate(270deg) translate(0, 40px);63
animation: content-loader-item-animation infinite 2s 0.875s linear;64
}65
66
.content-loader-item:nth-child(8) {67
transform: rotate(315deg) translate(0, 40px);68
animation: content-loader-item-animation infinite 2s 1.000s linear;69
}70
71
@keyframes content-loader-item-animation {72
0.0% {73
background: #b5b5b5;74
}75
76
20.0% {77
background: #808080;78
}79
80
25.0% {81
background: #c0c0c0;82
}83
84
100.0% {85
background: #c0c0c0;86
}87
}