Cara Membuat Loading Spinner Gambar Dengan Jquery Part2

Saya lanjutkan dari sesi sebelumnya, pada kesempatan kali ini saya akan menjelaskan cara membuat loading spinner gambar dengan jquery part2, jika pada sesi sebelumnya teman-teman sudah membuat dua buah file yaitu file index.html dan contohLoading.js, dimana pada file index.html tersebut adalah untuk menampilkan layout beserta dengan gambar-gambar yang dibutuhkan, sedangnkan pada file contohLoading.js adalah untuk menampung kode function Library JavaScript (jQuery) yang digunakan untuk membuat loading spinner tersebut. Sampai disini teman-teman tinggal buat satu buah file css untuk desain loading tersebut.

Berikut Kelanjutannya :

• Saya asumsikan teman-teman sudah buat file index.html dan contohLoading.js pada sesi sebelumnya
• Selanjutnya teman-teman buat lagi satu buah file css dengan nama style.css yang sejajar dengan kedua file yang sudah dibuat sebelumnya, dan ketikan kode seperti berikut :

.loading-img, .loading-img .box {
  position: absolute;
  left: 0;
  top: 0
}

.loading-img {
  background: #ddd;
  display: inline-block;
  width: 100%;
  height: 100%;
  z-index: 2
}

.loading-img .box {
  width: 78x;
  height: 78px;
  right: 0;
  bottom: 0;
  margin: auto
}

.loading-img .loading:after, .loading-img .loading:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%
}

.loading-img .loading:before {
  width: 35px;
  height: 35px;
  margin-top: -18px;
  margin-left: -18px;
  border-width: 2px 1px;
  border-style: solid;
  border-color: #000 rgba(0,0,0,.3);
  -webkit-animation: spin 3.45s infinite;
  -moz-animation: spin 3.45s infinite;
  -o-animation: spin 3.45s infinite;
  animation: spin 3.45s infinite
}

.loading-img .loading:after {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
  background-color: #000;
  -webkit-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  -moz-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  -o-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  animation: pulse 6.9s infinite, borderPulse 6.9s infinite
}
@-webkit-keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@-moz-keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@-o-keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@-webkit-keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@-moz-keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@-o-keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@-webkit-keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}
@-moz-keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}
@-o-keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}
@keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}

#anchor, #div {
  padding: 20px;
  background: #111;
  display: flex
}

#anchor .img-container, #div .img-container {
  position: relative;
  width: 15%;
  height: 0;
  padding-bottom: 15%;
  overflow: hidden
}

#anchor .img-container img, #anchor .img-container span, #div .img-container img, #div .img-container span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover
}

#anchor .img-container span, #div .img-container span {
  color: #111;
  font-size: 40px;
  background: #ff0;
  text-align: center
}

#anchor { flex-direction: row-reverse }

#anchor .img-container img, #anchor .img-container span { filter: brightness(100%) }

#anchor .img-container img:hover, #anchor .img-container span:hover { filter: brightness(50%) }

#anchor .img-container span {
  background: red;
  color: #fff
}

#trigger-anchor, #trigger-div { cursor: pointer }

#background .bg {
  height: 300px;
  background: url(https://unsplash.it/1920/1280?image=611) center center no-repeat fixed;
  background-size: cover
}

• Jika sudah teman-teman save ketiga file tersebut, dan seperti yang sudah teman-teman buat, teman-teman memiliki tiga buah file dengan nama index.html, contohLoading.js dan style.css.
• Jika sudah teman-teman coba akses file index.html tersebut melalui browser di komputer teman-teman, dan untuk gambarnya tinggal teman-teman sesuaikan dengan gambar yang teman-teman butuhkan.

Sampai di sini penjelasan saya mengenai cara membuat loading spinner gambar dengan jquery, semoga bermanfaat.