GIF images consists of many frames, so size of GIF image is more as compared to normal image. Its not recommended to load GIF images first and its better to maintain one normal preview image for every GIF image. You can use first frame of GIF image as preview image. Click here to see my on-line tool for generating first frame of GIF image

How Facebook Handles GIF images

Facebook is not loading GIF images directly. Its converting user uploaded GIF images into simple video format. Find below inspected source code
Here We are not following facebook way of dealing GIF images. We are just loading GIF images
on user's interest

ng2GifPreview.component.ts

I have created this Angular 2 component to create Facebook like GIF Preview.  You can find it on github
import { Component, Input } from '@angular/core';

@Component({
    selector: 'gifPreview',
    template: `<div class="jqGifPreview">
        <div class="jqGifImageDiv"  (click)="loadNormalImage($event)">
            <img class="jqGifImage" (load)="onImageLoad()" [src]="imgSrc"/>
            <div class="jqGifCircle" [hidden]="gifActiveMode" (click)="loadGifImage($event)">
                <div class="jqGifImageCenter"></div>
                <div class="jqGifImageCircle" [ngClass]="{jqGifRotating:gifLoadingMode}"></div>
                <div class="jqGifImageName"></div>
            </div>
        </div>
        <div class="jqGifImageFooter" [hidden]="gifActiveMode">
            <a class="jqGifImageFooterLeft" target="_blank" [href]="imgSrc">
                {{imgLink.hostname}}
            </a>
            <a class="jqGifImageFooterRight" #imgLink target="_blank" [href]="imgSrc"></a>
        </div>
    </div>`,
    styleUrls:['ng2GifPreview.component.css']
})
export class Ng2GifPreview {
    @Input('preview') preview: string;
    @Input('gif') gif: string;

    imgSrc: string = '';
    gifActiveMode: boolean = false;
    gifLoadingMode: boolean = false;

    constructor() {
    }

    ngOnInit(){
      this.imgSrc = this.preview;
    }

    onImageLoad() {
       if(this.gifLoadingMode) {
         this.gifActiveMode = true;
         this.gifLoadingMode = false;
       } else {
         this.gifActiveMode = false;
       }
    }

    loadGifImage($event) {
        this.imgSrc = this.gif;
        this.gifLoadingMode = true;
        $event.stopPropagation();
    }

    loadNormalImage($event) {
        this.imgSrc = this.preview;
        this.gifActiveMode = false;
        this.gifLoadingMode = false;
        $event.stopPropagation();
    }

}

CSS

This CSS gives Facebook like GIF look for above component
.jqGifPreview {
    display: inline-block;
    min-height: 44px;
    position: relative;
}

.jqGifPreview .jqGifImageCenter {
    background-position: 0px 0px;
    height: 72px;
    overflow-wrap: break-word;
    position: absolute;
    top: 50%;
    width: 72px;
    background: rgba(0, 0, 0, 0) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAAC3CAMAAABpNYOHAAACalBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///4AAAAAAAAAAAD///7///3///4AAAAAAAAAAAAAAAD///7//98AAAD///7///4AAAD///3///0AAAD///MAAAAAAAD///0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///7///r///z///0AAAD//4D///7///7///7///z///r///7///4AAAD///7///3///7///j///4AAAD///f///3///7///z///z///3///n///3///7///3//8wAAAD///3//9X///7///7//6r//9v///7///3///X///7///3///79/f3///7///z///D///z//+7///v///n///v///j///3///7//+3//+r///3///z///v///7///z///v///z///n///z///n///7///v///b///////3///r///7///3///v///z///3///7///0AAAD///3///7//+b///7///7///v///f//+////P///3///3///L///3///3//+v///T///7///7///3//7///+j///7///7+/v7///3///7///r///3///3///H///z///3///3//+P///3z8/P///7///v///L7+/vj4+P///77+/u6urr///T///i8vLz///7///z///r///339/c7Ozv5+fmhoaH6+vrFxcX9/f3b29v+/v7n5+fy8vLs7Oz9/f3Kysr6+vqnp6f19fV9fX3y8vJNTU3v7+8dHR3Ozs7Nzc3///bb29vb29v///7///9FB5JAAAAAzHRSTlMAZgYQBAIKHF5kDPkSYkb9k9UIFCIs+wgaz/ckj4lSFDY6blhUJkpgLlwYUMM4UJsOAuvj71Yw18cW53S7ItsoIJnBXmCLKqPlqQQqoQa19QIG33Ia043h8eliEEoOQC5GJn7LDgxmTDjZWD5ULFoo8Twa/YMysWpCXHC3lR6X0QrtrToeEBZ8bBKHpwwWycV2BAq93e96zS6BpRJIeIUIaGazRBTRNvPVXBgkWr9kNpGXDLcS0yLnOPVUcnb1YOlK1za9KJ0aUlAccHKlY0LfAAAFkUlEQVR4XqzYbcqDMBAE4BmwkgjJHxUEQRS/6yF6gN7/Pi+FlvKKbdXMcwDBZZLsLr5J+9pXrXHOtJWv+xSnxHdvuGL8PcYxl3Kw3GSH8oLdomnmF/MUYZ/c8AeTY4drxx26K364NJa72OZ7uZKFuy0JPitGHjAW+CRzPMRl2HazPMjesCWzPMxmWzVyPMEVWEtGnjIm6xwtPGlZ5arhac3/I2J5mr3iDR0DdHjLGSTHS2QYxER4mhhoeiVgZqD5mYSSwUo8YGCwAQ+xZTAbryIQGARPAQ8AhgIGQEqJFOgp0QM1JWrAU8IDFSUqoKVECxhKGMBRwum+pPs7XcV1KdAlU3dadCdYd6vIbjrt7ZtT4K57pWQvp+4113UYsq5H14nJukNZx6rromWdvW7akE1AsqlMNinKplfZRC2b8mWbB9k2RLeh0W+N9Jss/XZtLc43N35/zZjpUxRHGIe7dmeH1Owmq0tqRza7kjKVb8u6B7IsC2RZBIRCDrlFBEGiQjSKqCDgGaPRGE008cp93/d93+dv/qf0DGyYJVzd01XyfJn3yzxV3f322/22zKAQ/gopnpvOrtXBw4FQK6egt72ixwhUH2aIrR9k1jx6NA/AOWKwrb6heE8hdCoZPd1VPlCOp8zy1JC/uHiEyaMmCwEUVuwmFtlZDqB8X/MignXlyeWYdgNdR+rIYgwADY8tbYokWx4ni3PgJBA7TUTwSDHgfUiI6skqqtqwsKCJwbXRvbAq/3g0xaZyz58okVJgG2Gg0o1z85r6gWATYaGg5cR8ojE3oiNEAC/E4O4jIngGCAgR5e9HyaAQ0yTwIJ+gaM56exFv4hINNmIjMZP2DRMuNjfiiWx3M+GkBniYCGEMOE/E0IFNgkwBYcPbBVSKMeUDxzLxofRWK6otyMuEteiwYqpBNBOmscWKacfEf0NqwzUihk0oFWTyoVacacWNrg0DgkxpXLUiKKvdlwkvYI8VUz26MmH1qV0Wd4u4HbzSqkoA2LHCqu/YnGuAekbQKbU57tvOJ2qec3Kq3Kd5jw/ZpXsV9w3j9Pj/bz1PkZV1EyMnYkCfGNV2N6KtYlRngWCESVDworrgzf4A483+/QV632C8m7Hb+IAwwNABie/KxHeKav+S3etwIRBbenVCQHSJjrpteR31q1eNLl9dxDRaklxeyZl5eSgg1ulud4IycNEsSG3wX5q4xX6IGS80M6szVP9y5oWGa+Gvt69SjWAEGWIV1mpYpNRZwvCSJZaIEMveyXKnL6/+kDHd/b166atYbzC6k6nfm3Rjmgv0v1EEqakEBmyHTt0VwPle+41TjcBR/chaTU1OxPJ0Gv5iMH0IXKvWg4v+YPWsaR17u+BGm3mb8Zueh7uXCDFdQtyY9jLKGZPJX0CpZmvQamjQ0wWK89lZ0zTPMZjimKBBqxc6/rmmFgbTYZzU0zsVCoXeMJuqiihlhIGtwOWZMAq/lRlXO+DtE2Iir3iBY0V15O2k06KJDPkAOPeDErJmItdLYXBFLwY3kDZ28Djh4p0jgfPje40w/6z+Hb6sktuLQ5Jss0iSg1ckvfS0ZuLga69zqhweKsriTRufSlI07a2pnAxT72qaIvGZ7JqWk3BR7DqJHE0L85ls1JSQbZ6PPvbYKHJC0+w2vtGF6a+Sw6Z98qnDEPObZJdLlvTZ+uxzhxWTwyaHw7JHdtFF++JLid9ER2Xiq68lbpMka2YOfiO7eE3hbNO3ihjTd9/b+U1yYupuyj0PUNEPPyZk7tE5bIo9N9flyqWp/dPPuYpkKQs0zciCX36leWUtM6mJZuZvv7s8RmZa3i2KQkVWTMavf9AdLMvTO/hP/tHZO7VsOu2c9Un5O1vV+Y8icVZf15ocM2v0medC8ih2M4pHEndK3Vb+BVaSJWPblfLZAAAAAElFTkSuQmCC') no-repeat
        scroll 0px 0px/auto padding-box border-box;
    margin: -36px 0px 0px -36px;
  z-index: 1;
}

.jqGifPreview img {
    padding:0px;
    margin:0px;
}

.jqGifPreview .jqGifImageCircle {
    background-position: 0px -73px;
    height: 66px;
    position: absolute;
    width: 66px;
    background: rgba(0, 0, 0, 0) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAAC3CAMAAABpNYOHAAACalBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///4AAAAAAAAAAAD///7///3///4AAAAAAAAAAAAAAAD///7//98AAAD///7///4AAAD///3///0AAAD///MAAAAAAAD///0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///7///r///z///0AAAD//4D///7///7///7///z///r///7///4AAAD///7///3///7///j///4AAAD///f///3///7///z///z///3///n///3///7///3//8wAAAD///3//9X///7///7//6r//9v///7///3///X///7///3///79/f3///7///z///D///z//+7///v///n///v///j///3///7//+3//+r///3///z///v///7///z///v///z///n///z///n///7///v///b///////3///r///7///3///v///z///3///7///0AAAD///3///7//+b///7///7///v///f//+////P///3///3///L///3///3//+v///T///7///7///3//7///+j///7///7+/v7///3///7///r///3///3///H///z///3///3//+P///3z8/P///7///v///L7+/vj4+P///77+/u6urr///T///i8vLz///7///z///r///339/c7Ozv5+fmhoaH6+vrFxcX9/f3b29v+/v7n5+fy8vLs7Oz9/f3Kysr6+vqnp6f19fV9fX3y8vJNTU3v7+8dHR3Ozs7Nzc3///bb29vb29v///7///9FB5JAAAAAzHRSTlMAZgYQBAIKHF5kDPkSYkb9k9UIFCIs+wgaz/ckj4lSFDY6blhUJkpgLlwYUMM4UJsOAuvj71Yw18cW53S7ItsoIJnBXmCLKqPlqQQqoQa19QIG33Ia043h8eliEEoOQC5GJn7LDgxmTDjZWD5ULFoo8Twa/YMysWpCXHC3lR6X0QrtrToeEBZ8bBKHpwwWycV2BAq93e96zS6BpRJIeIUIaGazRBTRNvPVXBgkWr9kNpGXDLcS0yLnOPVUcnb1YOlK1za9KJ0aUlAccHKlY0LfAAAFkUlEQVR4XqzYbcqDMBAE4BmwkgjJHxUEQRS/6yF6gN7/Pi+FlvKKbdXMcwDBZZLsLr5J+9pXrXHOtJWv+xSnxHdvuGL8PcYxl3Kw3GSH8oLdomnmF/MUYZ/c8AeTY4drxx26K364NJa72OZ7uZKFuy0JPitGHjAW+CRzPMRl2HazPMjesCWzPMxmWzVyPMEVWEtGnjIm6xwtPGlZ5arhac3/I2J5mr3iDR0DdHjLGSTHS2QYxER4mhhoeiVgZqD5mYSSwUo8YGCwAQ+xZTAbryIQGARPAQ8AhgIGQEqJFOgp0QM1JWrAU8IDFSUqoKVECxhKGMBRwum+pPs7XcV1KdAlU3dadCdYd6vIbjrt7ZtT4K57pWQvp+4113UYsq5H14nJukNZx6rromWdvW7akE1AsqlMNinKplfZRC2b8mWbB9k2RLeh0W+N9Jss/XZtLc43N35/zZjpUxRHGIe7dmeH1Owmq0tqRza7kjKVb8u6B7IsC2RZBIRCDrlFBEGiQjSKqCDgGaPRGE008cp93/d93+dv/qf0DGyYJVzd01XyfJn3yzxV3f322/22zKAQ/gopnpvOrtXBw4FQK6egt72ixwhUH2aIrR9k1jx6NA/AOWKwrb6heE8hdCoZPd1VPlCOp8zy1JC/uHiEyaMmCwEUVuwmFtlZDqB8X/MignXlyeWYdgNdR+rIYgwADY8tbYokWx4ni3PgJBA7TUTwSDHgfUiI6skqqtqwsKCJwbXRvbAq/3g0xaZyz58okVJgG2Gg0o1z85r6gWATYaGg5cR8ojE3oiNEAC/E4O4jIngGCAgR5e9HyaAQ0yTwIJ+gaM56exFv4hINNmIjMZP2DRMuNjfiiWx3M+GkBniYCGEMOE/E0IFNgkwBYcPbBVSKMeUDxzLxofRWK6otyMuEteiwYqpBNBOmscWKacfEf0NqwzUihk0oFWTyoVacacWNrg0DgkxpXLUiKKvdlwkvYI8VUz26MmH1qV0Wd4u4HbzSqkoA2LHCqu/YnGuAekbQKbU57tvOJ2qec3Kq3Kd5jw/ZpXsV9w3j9Pj/bz1PkZV1EyMnYkCfGNV2N6KtYlRngWCESVDworrgzf4A483+/QV632C8m7Hb+IAwwNABie/KxHeKav+S3etwIRBbenVCQHSJjrpteR31q1eNLl9dxDRaklxeyZl5eSgg1ulud4IycNEsSG3wX5q4xX6IGS80M6szVP9y5oWGa+Gvt69SjWAEGWIV1mpYpNRZwvCSJZaIEMveyXKnL6/+kDHd/b166atYbzC6k6nfm3Rjmgv0v1EEqakEBmyHTt0VwPle+41TjcBR/chaTU1OxPJ0Gv5iMH0IXKvWg4v+YPWsaR17u+BGm3mb8Zueh7uXCDFdQtyY9jLKGZPJX0CpZmvQamjQ0wWK89lZ0zTPMZjimKBBqxc6/rmmFgbTYZzU0zsVCoXeMJuqiihlhIGtwOWZMAq/lRlXO+DtE2Iir3iBY0V15O2k06KJDPkAOPeDErJmItdLYXBFLwY3kDZ28Djh4p0jgfPje40w/6z+Hb6sktuLQ5Jss0iSg1ckvfS0ZuLga69zqhweKsriTRufSlI07a2pnAxT72qaIvGZ7JqWk3BR7DqJHE0L85ls1JSQbZ6PPvbYKHJC0+w2vtGF6a+Sw6Z98qnDEPObZJdLlvTZ+uxzhxWTwyaHw7JHdtFF++JLid9ER2Xiq68lbpMka2YOfiO7eE3hbNO3ihjTd9/b+U1yYupuyj0PUNEPPyZk7tE5bIo9N9flyqWp/dPPuYpkKQs0zciCX36leWUtM6mJZuZvv7s8RmZa3i2KQkVWTMavf9AdLMvTO/hP/tHZO7VsOu2c9Un5O1vV+Y8icVZf15ocM2v0medC8ih2M4pHEndK3Vb+BVaSJWPblfLZAAAAAElFTkSuQmCC') no-repeat
        scroll 0px -73px/auto padding-box border-box;
    margin: -33px 0px 0px -33px;
  z-index: 1;
}

.jqGifPreview .jqGifImageName {
    background-position: 0px -140px;
    height: 17px;
    position: absolute;
    width: 32px;
    background: rgba(0, 0, 0, 0) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAAC3CAMAAABpNYOHAAACalBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///4AAAAAAAAAAAD///7///3///4AAAAAAAAAAAAAAAD///7//98AAAD///7///4AAAD///3///0AAAD///MAAAAAAAD///0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///7///r///z///0AAAD//4D///7///7///7///z///r///7///4AAAD///7///3///7///j///4AAAD///f///3///7///z///z///3///n///3///7///3//8wAAAD///3//9X///7///7//6r//9v///7///3///X///7///3///79/f3///7///z///D///z//+7///v///n///v///j///3///7//+3//+r///3///z///v///7///z///v///z///n///z///n///7///v///b///////3///r///7///3///v///z///3///7///0AAAD///3///7//+b///7///7///v///f//+////P///3///3///L///3///3//+v///T///7///7///3//7///+j///7///7+/v7///3///7///r///3///3///H///z///3///3//+P///3z8/P///7///v///L7+/vj4+P///77+/u6urr///T///i8vLz///7///z///r///339/c7Ozv5+fmhoaH6+vrFxcX9/f3b29v+/v7n5+fy8vLs7Oz9/f3Kysr6+vqnp6f19fV9fX3y8vJNTU3v7+8dHR3Ozs7Nzc3///bb29vb29v///7///9FB5JAAAAAzHRSTlMAZgYQBAIKHF5kDPkSYkb9k9UIFCIs+wgaz/ckj4lSFDY6blhUJkpgLlwYUMM4UJsOAuvj71Yw18cW53S7ItsoIJnBXmCLKqPlqQQqoQa19QIG33Ia043h8eliEEoOQC5GJn7LDgxmTDjZWD5ULFoo8Twa/YMysWpCXHC3lR6X0QrtrToeEBZ8bBKHpwwWycV2BAq93e96zS6BpRJIeIUIaGazRBTRNvPVXBgkWr9kNpGXDLcS0yLnOPVUcnb1YOlK1za9KJ0aUlAccHKlY0LfAAAFkUlEQVR4XqzYbcqDMBAE4BmwkgjJHxUEQRS/6yF6gN7/Pi+FlvKKbdXMcwDBZZLsLr5J+9pXrXHOtJWv+xSnxHdvuGL8PcYxl3Kw3GSH8oLdomnmF/MUYZ/c8AeTY4drxx26K364NJa72OZ7uZKFuy0JPitGHjAW+CRzPMRl2HazPMjesCWzPMxmWzVyPMEVWEtGnjIm6xwtPGlZ5arhac3/I2J5mr3iDR0DdHjLGSTHS2QYxER4mhhoeiVgZqD5mYSSwUo8YGCwAQ+xZTAbryIQGARPAQ8AhgIGQEqJFOgp0QM1JWrAU8IDFSUqoKVECxhKGMBRwum+pPs7XcV1KdAlU3dadCdYd6vIbjrt7ZtT4K57pWQvp+4113UYsq5H14nJukNZx6rromWdvW7akE1AsqlMNinKplfZRC2b8mWbB9k2RLeh0W+N9Jss/XZtLc43N35/zZjpUxRHGIe7dmeH1Owmq0tqRza7kjKVb8u6B7IsC2RZBIRCDrlFBEGiQjSKqCDgGaPRGE008cp93/d93+dv/qf0DGyYJVzd01XyfJn3yzxV3f322/22zKAQ/gopnpvOrtXBw4FQK6egt72ixwhUH2aIrR9k1jx6NA/AOWKwrb6heE8hdCoZPd1VPlCOp8zy1JC/uHiEyaMmCwEUVuwmFtlZDqB8X/MignXlyeWYdgNdR+rIYgwADY8tbYokWx4ni3PgJBA7TUTwSDHgfUiI6skqqtqwsKCJwbXRvbAq/3g0xaZyz58okVJgG2Gg0o1z85r6gWATYaGg5cR8ojE3oiNEAC/E4O4jIngGCAgR5e9HyaAQ0yTwIJ+gaM56exFv4hINNmIjMZP2DRMuNjfiiWx3M+GkBniYCGEMOE/E0IFNgkwBYcPbBVSKMeUDxzLxofRWK6otyMuEteiwYqpBNBOmscWKacfEf0NqwzUihk0oFWTyoVacacWNrg0DgkxpXLUiKKvdlwkvYI8VUz26MmH1qV0Wd4u4HbzSqkoA2LHCqu/YnGuAekbQKbU57tvOJ2qec3Kq3Kd5jw/ZpXsV9w3j9Pj/bz1PkZV1EyMnYkCfGNV2N6KtYlRngWCESVDworrgzf4A483+/QV632C8m7Hb+IAwwNABie/KxHeKav+S3etwIRBbenVCQHSJjrpteR31q1eNLl9dxDRaklxeyZl5eSgg1ulud4IycNEsSG3wX5q4xX6IGS80M6szVP9y5oWGa+Gvt69SjWAEGWIV1mpYpNRZwvCSJZaIEMveyXKnL6/+kDHd/b166atYbzC6k6nfm3Rjmgv0v1EEqakEBmyHTt0VwPle+41TjcBR/chaTU1OxPJ0Gv5iMH0IXKvWg4v+YPWsaR17u+BGm3mb8Zueh7uXCDFdQtyY9jLKGZPJX0CpZmvQamjQ0wWK89lZ0zTPMZjimKBBqxc6/rmmFgbTYZzU0zsVCoXeMJuqiihlhIGtwOWZMAq/lRlXO+DtE2Iir3iBY0V15O2k06KJDPkAOPeDErJmItdLYXBFLwY3kDZ28Djh4p0jgfPje40w/6z+Hb6sktuLQ5Jss0iSg1ckvfS0ZuLga69zqhweKsriTRufSlI07a2pnAxT72qaIvGZ7JqWk3BR7DqJHE0L85ls1JSQbZ6PPvbYKHJC0+w2vtGF6a+Sw6Z98qnDEPObZJdLlvTZ+uxzhxWTwyaHw7JHdtFF++JLid9ER2Xiq68lbpMka2YOfiO7eE3hbNO3ihjTd9/b+U1yYupuyj0PUNEPPyZk7tE5bIo9N9flyqWp/dPPuYpkKQs0zciCX36leWUtM6mJZuZvv7s8RmZa3i2KQkVWTMavf9AdLMvTO/hP/tHZO7VsOu2c9Un5O1vV+Y8icVZf15ocM2v0medC8ih2M4pHEndK3Vb+BVaSJWPblfLZAAAAAElFTkSuQmCC') no-repeat
        scroll 0px -140px/auto padding-box border-box;
    margin: -9px 0px 0px -16px;
  z-index: 1;
}

.jqGifPreview .jqGifImageFooter {
    background-position: 0px 0px;
    bottom: 0px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    height: 56px;
    left: 0px;
    position: absolute;
    right: 0px;
    background: rgba(0, 0, 0, 0) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA4CAMAAAALvmLeAAAAqFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAs30iGAAAAOHRSTlMBAwUHCQsNDxIUFxkcHyIlKCsuMjU4PD9CRklNUFNXWl1hZGdrbnF0d3p9gIKFh4qMjpCSlJaYmaER318AAAAOSURBVAgdY2FgYaQnBAA+IQEYh7Mb5AAAAABJRU5ErkJggg==') repeat-x
        scroll 0px 0px/auto padding-box border-box;
}

.jqGifPreview .jqGifImageFooterLeft {
    bottom: 9px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    height: 18px;
    left: 11px;
    max-width: 400px;
    overflow-wrap: break-word;
    position: absolute;
    text-align: left;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    vertical-align: top;
    white-space: nowrap;
    width: 186px;
    word-wrap: break-word;
    perspective-origin: 93px 7px;
    transform-origin: 93px 7px;
    border: 0px none rgb(255, 255, 255);
    font: normal normal bold normal 11px/14.74px helvetica, arial,
        sans-serif;
    outline: rgb(255, 255, 255) none 0px;
    overflow: hidden;
    text-decoration: none;
}

.jqGifPreview .jqGifImageFooterRight {
    background-position: 0px -158px;
    bottom: 9px;
    cursor: pointer;
    display: block;
    height: 24px;
    position: absolute;
    right: 10px;
    width: 24px;
    background: rgba(0, 0, 0, 0) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAAC3CAMAAABpNYOHAAACalBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///4AAAAAAAAAAAD///7///3///4AAAAAAAAAAAAAAAD///7//98AAAD///7///4AAAD///3///0AAAD///MAAAAAAAD///0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///7///r///z///0AAAD//4D///7///7///7///z///r///7///4AAAD///7///3///7///j///4AAAD///f///3///7///z///z///3///n///3///7///3//8wAAAD///3//9X///7///7//6r//9v///7///3///X///7///3///79/f3///7///z///D///z//+7///v///n///v///j///3///7//+3//+r///3///z///v///7///z///v///z///n///z///n///7///v///b///////3///r///7///3///v///z///3///7///0AAAD///3///7//+b///7///7///v///f//+////P///3///3///L///3///3//+v///T///7///7///3//7///+j///7///7+/v7///3///7///r///3///3///H///z///3///3//+P///3z8/P///7///v///L7+/vj4+P///77+/u6urr///T///i8vLz///7///z///r///339/c7Ozv5+fmhoaH6+vrFxcX9/f3b29v+/v7n5+fy8vLs7Oz9/f3Kysr6+vqnp6f19fV9fX3y8vJNTU3v7+8dHR3Ozs7Nzc3///bb29vb29v///7///9FB5JAAAAAzHRSTlMAZgYQBAIKHF5kDPkSYkb9k9UIFCIs+wgaz/ckj4lSFDY6blhUJkpgLlwYUMM4UJsOAuvj71Yw18cW53S7ItsoIJnBXmCLKqPlqQQqoQa19QIG33Ia043h8eliEEoOQC5GJn7LDgxmTDjZWD5ULFoo8Twa/YMysWpCXHC3lR6X0QrtrToeEBZ8bBKHpwwWycV2BAq93e96zS6BpRJIeIUIaGazRBTRNvPVXBgkWr9kNpGXDLcS0yLnOPVUcnb1YOlK1za9KJ0aUlAccHKlY0LfAAAFkUlEQVR4XqzYbcqDMBAE4BmwkgjJHxUEQRS/6yF6gN7/Pi+FlvKKbdXMcwDBZZLsLr5J+9pXrXHOtJWv+xSnxHdvuGL8PcYxl3Kw3GSH8oLdomnmF/MUYZ/c8AeTY4drxx26K364NJa72OZ7uZKFuy0JPitGHjAW+CRzPMRl2HazPMjesCWzPMxmWzVyPMEVWEtGnjIm6xwtPGlZ5arhac3/I2J5mr3iDR0DdHjLGSTHS2QYxER4mhhoeiVgZqD5mYSSwUo8YGCwAQ+xZTAbryIQGARPAQ8AhgIGQEqJFOgp0QM1JWrAU8IDFSUqoKVECxhKGMBRwum+pPs7XcV1KdAlU3dadCdYd6vIbjrt7ZtT4K57pWQvp+4113UYsq5H14nJukNZx6rromWdvW7akE1AsqlMNinKplfZRC2b8mWbB9k2RLeh0W+N9Jss/XZtLc43N35/zZjpUxRHGIe7dmeH1Owmq0tqRza7kjKVb8u6B7IsC2RZBIRCDrlFBEGiQjSKqCDgGaPRGE008cp93/d93+dv/qf0DGyYJVzd01XyfJn3yzxV3f322/22zKAQ/gopnpvOrtXBw4FQK6egt72ixwhUH2aIrR9k1jx6NA/AOWKwrb6heE8hdCoZPd1VPlCOp8zy1JC/uHiEyaMmCwEUVuwmFtlZDqB8X/MignXlyeWYdgNdR+rIYgwADY8tbYokWx4ni3PgJBA7TUTwSDHgfUiI6skqqtqwsKCJwbXRvbAq/3g0xaZyz58okVJgG2Gg0o1z85r6gWATYaGg5cR8ojE3oiNEAC/E4O4jIngGCAgR5e9HyaAQ0yTwIJ+gaM56exFv4hINNmIjMZP2DRMuNjfiiWx3M+GkBniYCGEMOE/E0IFNgkwBYcPbBVSKMeUDxzLxofRWK6otyMuEteiwYqpBNBOmscWKacfEf0NqwzUihk0oFWTyoVacacWNrg0DgkxpXLUiKKvdlwkvYI8VUz26MmH1qV0Wd4u4HbzSqkoA2LHCqu/YnGuAekbQKbU57tvOJ2qec3Kq3Kd5jw/ZpXsV9w3j9Pj/bz1PkZV1EyMnYkCfGNV2N6KtYlRngWCESVDworrgzf4A483+/QV632C8m7Hb+IAwwNABie/KxHeKav+S3etwIRBbenVCQHSJjrpteR31q1eNLl9dxDRaklxeyZl5eSgg1ulud4IycNEsSG3wX5q4xX6IGS80M6szVP9y5oWGa+Gvt69SjWAEGWIV1mpYpNRZwvCSJZaIEMveyXKnL6/+kDHd/b166atYbzC6k6nfm3Rjmgv0v1EEqakEBmyHTt0VwPle+41TjcBR/chaTU1OxPJ0Gv5iMH0IXKvWg4v+YPWsaR17u+BGm3mb8Zueh7uXCDFdQtyY9jLKGZPJX0CpZmvQamjQ0wWK89lZ0zTPMZjimKBBqxc6/rmmFgbTYZzU0zsVCoXeMJuqiihlhIGtwOWZMAq/lRlXO+DtE2Iir3iBY0V15O2k06KJDPkAOPeDErJmItdLYXBFLwY3kDZ28Djh4p0jgfPje40w/6z+Hb6sktuLQ5Jss0iSg1ckvfS0ZuLga69zqhweKsriTRufSlI07a2pnAxT72qaIvGZ7JqWk3BR7DqJHE0L85ls1JSQbZ6PPvbYKHJC0+w2vtGF6a+Sw6Z98qnDEPObZJdLlvTZ+uxzhxWTwyaHw7JHdtFF++JLid9ER2Xiq68lbpMka2YOfiO7eE3hbNO3ihjTd9/b+U1yYupuyj0PUNEPPyZk7tE5bIo9N9flyqWp/dPPuYpkKQs0zciCX36leWUtM6mJZuZvv7s8RmZa3i2KQkVWTMavf9AdLMvTO/hP/tHZO7VsOu2c9Un5O1vV+Y8icVZf15ocM2v0medC8ih2M4pHEndK3Vb+BVaSJWPblfLZAAAAAElFTkSuQmCC') no-repeat
        scroll 0px -158px/auto padding-box border-box;
}

.jqGifPreview img {
    width: 100%;
}

.jqGifPreview .jqGifImage {
    width: 100%;
}

.jqGifPreview .jqGifCircle {
    cursor: pointer;
    position: absolute;
    left: calc(50%);
    top: calc(50% - 12px);
}

@-webkit-keyframes jqGifRotating / Safari and Chrome / {from {
    -ms-transform:rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

}
@keyframes jqGifRotating {from { -ms-transform:rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

}
.jqGifPreview .jqGifRotating {
    -webkit-animation: jqGifRotating 2s linear infinite;
    -moz-animation: jqGifRotating 2s linear infinite;
    -ms-animation: jqGifRotating 2s linear infinite;
    -o-animation: jqGifRotating 2s linear infinite;
    animation: jqGifRotating 2s linear infinite;
}

Implementaion

Find below for HTML markup. gifPreview element tag has 2 attributes 
gif : gif image path
preview : gif preview image path
<gifPreview preview="previewImage" gif="gifImage"></gifPreview>

0 comments:

Blogroll

Follow this blog by Email

Popular Posts