আপনার ব্লগার ব্লগে pure CSS page loading Spinners যুক্ত করুন। [২০১৪ সালের সেরা পেজ Loading Spinner]

বন্ধুরা আমার সালাম ও শুভেচ্ছা নিবেন। আশা করি আপনারা সকলে আল্লাহ রহমতে এবং মাগফিরতের মাসের সকলে ভাল আছেন। আর আমিও আপনাদের সকলের ভালবাসা ও শ্রদ্ধা নিয়ে ভাল আছি। বন্ধুরা আজ আমি আপনাদের সাথে চমৎকার একটি শিক্ষণীয় বিষয় নিয়ে হাজির হয়েছি। কেননা আমরা যারা অনলাইনে কাজ করি থাকি। তাদের একটি স্বাদের বা প্রিয় blog সাইট আছে। কিন্তু যখন আমরা আমাদের সাইট বা অন্য কারো সাইট ভিজিট করি তখন দেথা যায় পেজ লোডিং নামে একটি সুন্দর অপশন দেখা যায়। তাহলে আর কথা না বাড়িয়ে কাজের কথায় আশা যাক। দেখুন তাহলে>>>>>

১// প্রথমে আপনার ব্লগ সাইটের ড্যাশবোর্ডে প্রবেশ করুন।
২// তার আপনার ব্লগ ড্যাশবোর্ড হতে টেমপ্লেট নির্বাচন করুন এবং Edit HTML নির্বাচন করুন।
৩// তার পর বডি ট্যাগ থুজে আপানার বের করুন।

<body> or </body>

৪//আপনারা <body> খুজে পেলে তার উপরে নিচের কোডগুলো কপি করে পেষ্ট করুন। আর বডি ট্যাগ খুজে না পেলে </body> এর উপরে কোডগুলো কপি করে পেষ্ট করুন।

<div class="animation-1">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>

৫// CSS Code ব্যবহার করতে হবে।

]]></b:skin>

৬// ঠিক উপরে নিচের কোড গুলো কপি পেষ্ট করুন।

.animation-1
{
    width:55px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform:rotate(45deg);
}

.animation-1 div
{
    display:inline-block;
    background-color: #0088d0;
    width:25px;
    height:25px;
    margin:0;
    padding:0;
}

.animation-1 .box1
{
    -webkit-animation: animation1-box1 1.5s infinite;
    animation: animation1-box1 2s infinite;
}

.animation-1 .box2
{
    -webkit-animation: animation1-box2 1.5s infinite;
    animation: animation1-box2 2s infinite;
}

.animation-1 .box3
{
    -webkit-animation: animation1-box3 1.5s infinite;
    animation: animation1-box3 2s infinite;
}

.animation-1 .box4
{
    -webkit-animation: animation1-box4 1.5s infinite;
    animation: animation1-box4 2s infinite;
}

@keyframes animation1-box1
{
    40%
    {
        transform: translate(-25px, -25px) rotate(85deg);
    }
    50%
    {

        transform: translate(-25px, -25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}


@keyframes animation1-box2
{
    40%
    {
        transform: translate(50px, -25px) rotate(85deg);
    }
    50%
    {
        transform: translate(50px, -25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}

@keyframes animation1-box3
{
    40%
    {
        transform: translate(-50px, 25px) rotate(85deg);
    }
    50%
    {
        transform: translate(-50px, 25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}


@keyframes animation1-box4
{
    40%
    {
        transform: translate(25px, 25px) rotate(85deg);
    }
    50%
    {
        transform: translate(25px, 25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}

৭// ব্যাস আপনার কাজ শেষ এবং টেমপ্লেট সেভ দিয়ে বের হয়ে আসবেন।
তাই আজ এই পর্যন্ত। আপনার সকলে ভাল থাকুন এই কামনা করে লেখা শেষ করলাম। আল্লাহ হাফেজ।

AponJon

Wednesday, July 9, 2014