#CSS - #Web Design

Membuat Animasi Loading Dengan CSS3

By Diki Alfarabi Hadi
18 February 2016
CSS Web Design

Membuat Animasi Loading Dengan CSS3 – Pada kesempatan ini kita akan membahas tentang cara membuat animasi loading dengan css3. banyak template yang lagi ngetrend sekarang ini sudah mulai membuat efek loading yang beragam. dan berbagai bentuk. bentuknya pun sangat keren-keren ya teman-teman. dulu gambar animasi loading di buat dengan gambar yang berekstensi gif. dan gambar nya hanya tinggal di letakkan pada bagian website yang ingin di munculkan animasi loading. tetapi seiring berkembangnya dunia development, css kini telah mampu membuat animasi loading.

Banyak web designer yang membuat Animasi loading di tengah-tengah halaman website saat halaman di reload. dan ada juga yang menempatkan animasi loading untuk animasi ajax. misalnya kita ingin menampilkan data dari database dengan menggunakan bantuan ajax jquery, kita bisa memberikan efek loading di bagian data yang di tampilkan. untuk membuat tampilan aplikasi kita lebih hidup. namun terlepas dari yang saya jelaskan barusan, membuat animasi loading tidak mempunyai aturan khusus harus di gunakan kapan dan di mana. semuanya terserah kepada inspirasi dan kekreatifitassan kita masing-masing.

Membuat Animasi Loading Dengan CSS3

Langsung saja kita masuk ke cara membuat animasi loading sederhana dengan menggunakan css. tutorial loading animasi dengan css ini saya kutip dari sini. teman-teman bisa mempelajari nya lebih lanjut. di sini saya hanya mencoba mereview sekaligus menjelaskan tentang fungsi-fungsi dasarnya untuk menciptakan efek loading dengan css.

Membuat animasi loading dengan css3

Oke langsung saja. siapkan sebuah file php datau html terserah teman-teman. saya menyediakan sebuah file html dengan nama loading.html

loading.html

<!DOCTYPE html>

<html>

<head>

<title>Membuat Animasi Loading Dengan CSS3 | WWW.MALASNGODING.COM</title>

</head>

<body>

<h1>Membuat Animasi Loading Dengan CSS3 | WWW.MALASNGODING.COM</h1>

</center>

<div class="loader">Loading..</div>

<div class="loader2">Loading..</div>

<div class="loader3">Loading..</div>

</body>

</html>

bisa teman-teman lihat pada contoh di atas. kita membuat tiga buah element div yang masing-masing kita beri class yang berbeda. ada loader, loader2, dan loader3. jadi ketiga loader ini kita akan buatkan menjadi 3 efek animasi loading yang bagus.

kemudian berikan sentuhan cssnya

style.css

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

body{

background: #28324E;

font-family: roboto;

}

h1{

color: #fff;

width: 600px;

}

/*loader*/

.loader,

.loader:before,

.loader:after {

background: #ffffff;

-webkit-animation: load1 1s infinite ease-in-out;

animation: load1 1s infinite ease-in-out;

width: 1em;

height: 4em;

}

.loader:before,

.loader:after {

position: absolute;

top: 0;

content: '';

}

.loader:before {

left: -1.5em;

-webkit-animation-delay: -0.32s;

animation-delay: -0.32s;

}

.loader {

text-indent: -9999em;

margin: 88px auto;

position: relative;

font-size: 11px;

-webkit-transform: translateZ(0);

-ms-transform: translateZ(0);

transform: translateZ(0);

-webkit-animation-delay: -0.16s;

animation-delay: -0.16s;

}

.loader:after {

left: 1.5em;

}

@-webkit-keyframes load1 {

0%,

80%,

100% {

box-shadow: 0 0 #ffffff;

height: 4em;

}

40% {

box-shadow: 0 -2em #ffffff;

height: 5em;

}

@keyframes load1 {

0%,

80%,

100% {

box-shadow: 0 0 #ffffff;

height: 4em;

}

40% {

box-shadow: 0 -2em #ffffff;

height: 5em;

}

/*akhir loader*/

/*loader 2*/

.loader2 {

font-size: 20px;

margin: 100px auto;

width: 1em;

height: 1em;

border-radius: 50%;

position: relative;

text-indent: -9999em;

-webkit-animation: load4 1.3s infinite linear;

animation: load4 1.3s infinite linear;

-webkit-transform: translateZ(0);

-ms-transform: translateZ(0);

transform: translateZ(0);

}

@-webkit-keyframes load4 {

0%,

100% {

box-shadow: 0 -3em 0 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 0 #ffffff;

}

12.5% {

box-shadow: 0 -3em 0 0 #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0 0 0 #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;

}

25% {

box-shadow: 0 -3em 0 -0.5em #ffffff, 2em -2em 0 0 #ffffff, 3em 0 0 0.2em #ffffff, 2em 2em 0 0 #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;

}

37.5% {

box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 0 #ffffff, 2em 2em 0 0.2em #ffffff, 0 3em 0 0em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;

}

50% {

box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 0em #ffffff, 0 3em 0 0.2em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;

}

62.5% {

box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 0 #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0 0 0 #ffffff, -2em -2em 0 -1em #ffffff;

}

75% {

box-shadow: 0em -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0 #ffffff;

}

87.5% {

box-shadow: 0em -3em 0 0 #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0 #ffffff, -2em -2em 0 0.2em #ffffff;

}

@keyframes load4 {

0%,

100% {

box-shadow: 0 -3em 0 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 0 #ffffff;

}

12.5% {

box-shadow: 0 -3em 0 0 #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0 0 0 #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;

}

25% {

box-shadow: 0 -3em 0 -0.5em #ffffff, 2em -2em 0 0 #ffffff, 3em 0 0 0.2em #ffffff, 2em 2em 0 0 #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;

}

37.5% {

}

50% {

}

62.5% {

box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 0 #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0 0 0 #ffffff, -2em -2em 0 -1em #ffffff;

}

75% {

}

87.5% {

box-shadow: 0em -3em 0 0 #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0 #ffffff, -2em -2em 0 0.2em #ffffff;

}

/*akhir loader2*/

/*loader 3*/

.loader3:before,

.loader3:after,

.loader3 {

border-radius: 50%;

width: 2.5em;

height: 2.5em;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

-webkit-animation: load7 1.8s infinite ease-in-out;

animation: load7 1.8s infinite ease-in-out;

}

.loader3 {

font-size: 10px;

margin: 80px auto;

position: relative;

text-indent: -9999em;

-webkit-transform: translateZ(0);

-ms-transform: translateZ(0);

transform: translateZ(0);

-webkit-animation-delay: -0.16s;

animation-delay: -0.16s;

}

.loader3:before {

left: -3.5em;

-webkit-animation-delay: -0.32s;

animation-delay: -0.32s;

}

.loader3:after {

left: 3.5em;

}

.loader3:before,

.loader3:after {

content: '';

position: absolute;

top: 0;

}

@-webkit-keyframes load7 {

0%,

80%,

100% {

box-shadow: 0 2.5em 0 -1.3em #ffffff;

}

40% {

box-shadow: 0 2.5em 0 0 #ffffff;

}

@keyframes load7 {

0%,

80%,

100% {

box-shadow: 0 2.5em 0 -1.3em #ffffff;

}

40% {

box-shadow: 0 2.5em 0 0 #ffffff;

}

/*akhir loader3*/

dan jalankan pada browser.

membuat animasi loading dengan css3

efek animasi loading pun selesai.

See the Pen membuat animasi loading dengan html by Malas Ngoding (@malasngoding) on CodePen.0

Terima kasih sudah membaca tutorial membuat animasi loading dengan css3. semoga tutorial css3 bahasa indonesia ini dapat bermanfaat. terutama untuk saya sendiri. hehe

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.