أضافة تأثير تحميل المدونة على شكل باخرة في البحر (عمل Loader انتظار تحميل الصفحة)

قم بالبحث فى قالب مدونتك عن الوسم </head> ثم قم بوضع الكود التالى فوقة

.boxed {
  margin: 0 auto;
  margin-bottom: 5rem;
  max-width: 90rem;
  min-height: 50rem;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.15), 0 -0.5rem 1rem 0 rgba(0, 0, 0, 0.033);
}

.padded {
  padding: 2.5rem;
}
.padded--slightly {
  padding: 1.618rem;
}

.centered-container {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  max-width: 75%;
  margin: 0 auto;
  text-align: center;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

.vertical-align-helper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -5px;
}

.vertical-align-helper > [class*=vertical-align--] {
  display: inline-block;
  width: 100%;
}

.text--centered {
  text-align: center;
}

.vertical-align--middle {
  vertical-align: middle;
}

ferry {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: inline-block;
  width: 64px;
  height: 32px;
  border-radius: 3px 0 0 0;
  background-color: #2b2b2b;
  z-index: 1;
  -webkit-animation: bop .48s ease-in-out alternate infinite;
          animation: bop .48s ease-in-out alternate infinite;
  box-shadow: inset 0 -5px 0 0 #e74c3c, inset 0 -15px 0 0 #2b2b2b, inset 0 -17px 0 0 #f0cf3c;
  border-top: 4px solid #ecf0f1;
}
@-webkit-keyframes bop {
  to {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
}
@keyframes bop {
  to {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
}
ferry:after {
  content: "";
  position: absolute;
  top: -18px;
  right: 0;
  display: block;
  width: 45px;
  height: 15px;
  background-color: #ecf0f1;
  z-index: 1;
  border-radius: 3px 3px 0 0;
}
ferry:before {
  content: "";
  position: absolute;
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
  top: -5px;
  left: -3px;
  width: 10px;
  height: 50px;
  background-color: white;
}
ferry chimney {
  position: absolute;
  top: -35px;
  display: block;
  width: 17px;
  height: 22px;
  background-color: #f0cf3c;
  left: 32px;
  z-index: -1;
  -webkit-transform: rotate(8deg);
          transform: rotate(8deg);
  box-shadow: inset 0 3px 0 0 #2b2b2b;
}
ferry waves {
  position: absolute;
  bottom: -37px;
  display: block;
  width: 100px;
  height: 50px;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjE1NSIgaGVpZ2h0PSI4NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI4NyIgd2lkdGg9IjE1NyIgeT0iLTEiIHg9Ii0xIi8+CiAgPGcgZGlzcGxheT0ibm9uZSIgb3ZlcmZsb3c9InZpc2libGUiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIGlkPSJjYW52YXNHcmlkIj4KICAgPHJlY3QgZmlsbD0idXJsKCNncmlkcGF0dGVybikiIHN0cm9rZS13aWR0aD0iMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPgogIDwvZz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzkiPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z18xIiBjeT0iMzMuNSIgY3g9IjM0LjUiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxlbGxpcHNlIHJ5PSIyNiIgcng9IjI2IiBpZD0ic3ZnXzMiIGN5PSIzMy41IiBjeD0iNjMuODY4NDkzIiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z182IiBjeT0iMzMuNSIgY3g9IjkxLjcxODg4IiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z183IiBjeT0iMzMuNSIgY3g9IjEyMS4wODczNzMiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxyZWN0IGlkPSJzdmdfOCIgaGVpZ2h0PSI0NiIgd2lkdGg9IjE0MC4wMDAwMDYiIHk9IjMyLjUiIHg9IjcuNSIgc3Ryb2tlLXdpZHRoPSIxLjUiIGZpbGw9IiNmZmYiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPg==");
  background-size: 133% 144%;
  -webkit-animation: sail 4s linear infinite;
          animation: sail 4s linear infinite;
}
@-webkit-keyframes sail {
  to {
    background-position: 400px 0;
  }
}
@keyframes sail {
  to {
    background-position: 400px 0;
  }
}

</style>

قم بالبحث فى قالب مدونتك عن الوسم </body> ثم قم بوضع الكود التالى فوقة