Base de connaissances
Abonné:
- Organisé par
-
-
Skeletton screen (Squelette de chargement)
-
Skeletton screen (Squelette de chargement)
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
-
0 Réponses
Désolé, aucune réponse n’a été trouvée.
Connectez-vous pour répondre.