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!