• Base de connaissances

  Skeletton screen (Squelette de chargement)

  Posté par Alexandre sur 4 mai 2023 à 17h43

  Vous connaissez sans doute, ou au moins l’avez vous déjà vu (ne serait-ce que lors du chargement de ce formum ppfc) le skeletton est une “astuce” qui permet de faire croire que le contenu est là – ou en tous cas qui v’a l’être très vite- en faisant apparaitre des rectangles (placeholders) là où devraient apparaitre des données.
  Sous powerapps ces temps ci on voit des tendances à vouloir reproduire le système, et l’article (comme souvent) le plus fourni sur le sujet est celui de Matthew Devaney (son seul défaut est sans doute son goût maladif pour les chats 😛 ) : https://www.matthewdevaney.com/power-apps-shimmer-control-gorgeous-looking-loading-screens/

  Le reproche que j’ai à faire à ce tuto c’est qu’il nécessite de pouvoir activer les composants tiers sur son environnement, ce que tous les citizens n’ont pas forcément le droit de faire. De plus c’est un peu utiliser une masse pour écraser un oeuf….
  Du coup je me suis mis en tête de le reproduire plus simplement.

  Voici l’astuce : j’utilise un svg animé qui se charge du “pavé gris” … Tout simplement 🙂 . Avec un peu d’astuce il s’adapte en hauteur et largeur au contrôle image, et on peut lui configurer un border radius selon l’envie.

  Voici le code que je place dans la propriété ‘image’ d’un contrôle ‘image’ :

  "data:image/svg+xml;utf8, "&EncodeUrl(n"<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 "&Self.Width&" "&Self.Height&"' >nnn  <defs>nnn    <linearGradient id='shimmer' x1='-250%' y1='0%' x2='200%' y2='0.1%'>n      <stop stop-color='#EFEFEF' offset='-10%'>n        <animate repeatCount='indefinite' attributeName='offset' values='-0.5;0.95' dur='1.5s' begin='0s' />n      </stop>n      <stop stop-color='#DFDFDF' offset='-5%'>n        <animate repeatCount='indefinite' attributeName='offset' values='-0;1' dur='1.5s' begin='0s' />n      </stop>n      <stop stop-color='#EFEFEF' offset='0%'>n        <animate repeatCount='indefinite' attributeName='offset' values='0.05;1.05' dur='1.5s' begin='0s' />n      </stop>n    </linearGradient>nnn  </defs>n  <rect width='100%' height='100%' fill='url(#shimmer)' />n  n</svg>") 

  Et voici ce que ca donne

  

  PostID=bY9IYp0P1roQYr2

  Alexandre a répondu Il y a 7 mois, 4 semaines 1 Membre · 0 Réponses

  • Astuce
  • chargement
  • loading
  • skeletton
  • SVG
• 0 Réponses

Connectez-vous pour répondre