Signup for the Ionic Newsletter to get the latest news and updates!

  • sudhan

    it’s really super ionic team

  • http://www.VisitAnyPlace.com/ Miguel Carrasco Q.

    waiting for ionic 4…

    • Mike Hartington

      Soon….

      • Peter Warmenhoven

        what

      • Naveed Ahmed

        Should we expect Capacitor to be released with Ionic 4?

  • Usman Qadri

    Would really love to have transitions built in with it!
    Here a link having detailed explanation: https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

  • Roman Rosluk

    Do you have any release date of Ionic 4?
    In weeks, months… Any approximate date?
    Thanks!

    • Caique Sousa

      I’d like to know too!
      It can be a wrong guess!
      I really would like to know!!

      • Mike Hartington

        Sooon….SOON!

        • Roman Rosluk

          Well… Thanks for an answer.
          But soon can be 1 day or 6 month 🙂
          So, let’s say

          “` typescript
          export enum Release {
          Soon = ‘this week’,
          Sooon = ‘next week’,
          Soooon = ‘this month’,
          Sooooon = ‘next month’,
          Soooooon = ‘from 2 to 6 months’
          }

          export class Ionic4 {
          static release(): Release {
          return Release.??? // please place your Soon here
          }
          }
          “`

          Thanks!

    • http://www.technbuzz.com/ Samiullah Khan

      Spoiler Alert!
      I think the upcoming ng conf will be full of ionic major announcement.
      I am very excited for that because there will be some surprising ones.

  • Mubasshir Pawle

    Loved it…

  • Giovanni Camana

    hi guys , I made a skeleton post, I can also check here!! https://blog.ng-classroom.com/blog/ionic2/ghost-loading/ 🙂

  • Sergio López Esparza

    Thank you for the explanation, I implemented it yesterday on the app that i’m developing and it looks very nice.

  • Huy Le Cong

    Love it, love ionic

  • Rashid NK

    i have seen this in many sites, and was looking for how to do this in my apps, but didnt know what to search in google, finally found it is “SKELETON” , thank u justin 😀

    • Muji Al-okaidi

      Haha, same here. just didn’t know the phrase!

  • Balaji Rajendran

    Added a simple animation effect to the above shared example.
    https://stackblitz.com/edit/ionic-skeleton-screen-cp1ghm

    • Lola

      @disqus_dnpez4eGNO:disqus You are awesome!! Many thx!

      • Balaji Rajendran

        Hi,
        In the example, the initial value for the background-position is hardcoded (background-position: -406px) based on that example’s output window / element size. You have to adjust this value according to the width of the element where you are applying this (i.e background-position: -width-of-the-element-in-px).

  • Jack Gallagher

    I did this using a directive that swaps in a placeholder element for any element, so I just pop *placeholderIf on any element and it’ll work. The placeholder component in the code below is a simple div with animated background like above. Feel free to use:

    @Directive({
    selector: ‘[placeholderIf]’ // Attribute selector
    })
    export class PlaceholderIfDirective {
    innerHtml: any;

    @Input(‘placeholderIf’)
    set thing(any) {
    if (!any) {
    this.viewContainerRef.clear();
    this.viewContainerRef.createEmbeddedView(this.templateRef);
    }
    else {
    this.viewContainerRef.clear();
    let factory = this.componentFactoryResolver.resolveComponentFactory(PlaceholderComponent);
    this.viewContainerRef.createComponent(factory);
    }
    }

    constructor(private templateRef: TemplateRef,
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver) {
    }
    }

  • Lola

    Awesome Justin. Now my app look so much fancier. Many thanks! And thanks Ionic!

  • John Cristophere Carlos

    Just added custom class for animation on the background
    I HOPE THIS WILL HELP 😀

    // HTML

    // CSS
    .animate-skeleton-background {
    -webkit-animation: infinite bgcolorchange 4s;
    animation: 4s infinite bgcolorchange;
    opacity: 0.5;
    }

    @keyframes bgcolorchange {
    0% {
    color: #f2f2f2;
    }
    25% {
    background: lightgray;
    }
    50% {
    background: #f2f2f2;
    }
    75% {
    background: lightgray;
    }
    100% {
    background-color: #f2f2f2;
    }
    }

    @-webkit-keyframes bgcolorchange {
    0% {
    background: #f2f2f2;
    }
    25% {
    background: lightgray;
    }
    50% {
    background: #f2f2f2;
    }
    75% {
    background: lightgray;
    }
    100% {
    background: #f2f2f2;
    }