Twinr Builder Resources
  • ๐Ÿ™ŒGetting Started
    • What is Twinr?
    • Fun Fact
  • ๐Ÿ“ฑCreate App
    • Create App from Template
      • Blank
      • E-Commerce App
      • News App
      • Restaurant App
  • ๐Ÿ‘ฅOrganization
    • Create Organization
    • Invite Members
  • ๐Ÿ–ฅ๏ธDashboard
    • App Dashboard
    • Preview App
    • Delete App
  • ๐Ÿ“ฒSetup Branding Info
    • App info
    • Launch screen
    • App Permissions
      • Camera Permission
      • Photo Library Permission
      • Microphone Permission
      • App Tracking Transparency
      • Location Permission
      • Read External Storage
    • App Settings
      • Enable portrait only mode
      • Prevent App Sleep
      • Enable/Disable iPad Support
      • Customize Minimum Android Version
  • ๐ŸŽจSetup Theme
    • Overview
    • App Theme
      • Color Theme
      • Text Theme
      • Button Theme
    • Bottom Tab bar
    • Navigation bar
      • Button setting
    • Status bar
  • ๐Ÿ“ฒScreen Customization
    • External URL Handling
    • Apply Custom CSS
    • Apply Custom JavaScript
    • Hide Elements
    • Page Refresh
    • Login
      • General
      • Login Page
    • Tab bar(Bottom tabs)
      • Add New Screen
      • Delete Screen
      • Rearrange Screen
      • General
      • Navigation Bar
        • Navigation Bar Title
        • Navigation Bar Buttons
          • Back Button
          • Linker Button
          • Cart Button
          • Custom Button
          • Hamburger Menu
          • Native Link Sharing
          • Native Notification Screen Button
      • Tab Screen - External URL Handling
      • Responsible URL
      • Tab Screen - Hide Elements
      • Tab Screen - CSS
      • Tab Screen - Scripts
  • Native Screen
    • Title Element
    • Paragraph Element
    • Button Element
    • Image Element
    • Spacer Element
    • Divider Element
    • Banner Element
      • Banner Element(with Background Image)
      • Banner Element(with Background Color)
    • List Element
      • List Grid Element
      • List Vertical Element
      • List Horizontal Element
    • Product List Element
    • Setting List Element
  • ๐Ÿ› ๏ธApp Configuration
    • Add New Configuration
  • ๐Ÿ”—Extensions
    • Overview
    • Page Loader
    • Pull to Refresh
    • Custom User Agent
    • Custom Fonts
    • Cache Policy
    • No Internet View
    • App Review
    • App Onboarding
    • Multi Language
    • In-App Purchase (IAP)
      • iOS In-App Purchase (IAP)
      • Android In-App Purchase (IAP)
    • Deeplink
    • Force App Update
    • Account Delete
    • Dynamic Titles
  • โš™๏ธIntegrations
    • Overview
    • Firebase Push Notification
      • Enable Push Notification
      • Send Push Notification
    • Push Permission Reminder
    • Personalized Push Notification
    • Abandoned Cart Push Notification
    • Native Notification Screen
    • AdMob
      • Create Android & iOS Apps
      • Create Ads on AdMOb
      • Setup AdMob Integration
    • Firebase Analytics
      • Auto Tracked Analytics
      • Custom Analytics
      • How to check Analytics in Firebase?
  • Plugins
    • Overview
    • WooCommerce
    • Shopify
    • Preshtashop
  • Engage
    • Overview
    • Engage Dashboard
    • One Time Campaigns
    • Event Triggered Campaigns
      • Order Created
      • Order Status Change
      • Product Created
      • Product Re-stock
      • Product Out-of-stock
      • Product Low Stock
      • Coupon Created
    • Welcome Push Notification
    • Inactivity Push Notification
  • ๐Ÿ“ŠApp Analytics
    • Overview
    • Acquisition & Retention
      • Number of Sessions
      • Number of Unique Sessions
      • Daily Active Users
      • Total App Sessions
      • New App Sessions
      • Session by Platform
      • Average Session Length
      • Session by Devices
      • Retention
    • Revenue
      • Sales
      • Orders
      • Total Revenue - Current vs Previous Period
      • Total Orders - Current vs Previous Period
      • Revenue by Device
      • Average Order Value by Device
      • Order by Device
      • Orders by New vs. Returning Users
      • Top 10 Popular Products
      • Promo Code Revenue vs Revenue
  • JS Bridge
    • What is the JS Bridge?
    • AdMob Interstitial Ad
    • Change App Language
    • Push Notification - Device Token
    • Request Account Delete
    • Native Datastore
  • ๐Ÿš€Publish Apps
    • Publishing to the Google Play Store
      • Setup Android Signing Information
      • Get Android Build File
      • Create Your Google Developer Account
      • Setup your App on Google Play Store
      • Submit Your App to Production
      • Reset Android Signing Key
    • Publishing to the Apple App Store
      • Create Your Apple Developer Account
      • Setup Annual Payment for your Apple Developer Account
      • Create Your Apple Bundle ID
      • Setup iOS Signing Info
      • Get iOS Build File
      • Add Users to Your App Store Connect Team (Optional)
      • Add Users to TestFlight (Optional)
      • Submit Your Build to The App Store
  • ๐Ÿ‘คTwinr Account
    • Change Password
    • Billing & Payments
    • Invoices
    • Update Payment Method
    • Enable 2-Step Authentication
  • ๐Ÿ‘ฉโ€๐Ÿ’ผSupport
    • Contact Support
    • On-demand Services
      • End-to-End App Solution(All Inclusive)
      • App Development
      • App Publishing
      • App Screenshots
      • Login Script
      • Push Notification Setup
  • ๐ŸคPartnership & Earnings
    • Twinr Partnership Model
    • Agency Plan
    • Become an Affiliate
  • โ“FAQs
    • Subscription
    • Preview your App
    • App Customization
    • Build APK & IPA
    • Publishing App
Powered by GitBook
On this page
  • What is Page Loader?
  • How to setup Page Loader?
  • How to test Page loader in Twinr Previewer App?
  • Benefits of using Page Loader
  • Common Questions

Was this helpful?

  1. Extensions

Page Loader

PreviousOverviewNextPull to Refresh

Last updated 1 year ago

Was this helpful?

What is Page Loader?

Page loaders are what you see on the mobile screen while the rest of the pageโ€™s content is still loading.

How to setup Page Loader?

1.) Go to Add-ons -> Extensions -> Page Loader & Enable it.

NOTE: Please create a new version of the App e.x. 1.0.2, if the current version does not support this feature. If the previous version is live on the stores, then request a new build and submit this new version to the stores.

2.) Select a loader color to match your brand color.

3.) Select a Background color and the transparency of the loading page.

4.) Save as a draft.

1.) Select Loader Size: You can decide the size of loader as per your requirement and UI.

2.) Select Custom Loader: Twinr has a range of different animated loaders from which you can choose.

3.) Save as a draft.

Once you are done with the customization, open the app in previewer or refresh it from the floating hamburger button. You will be able to see the loader you have customized.

Benefits of using Page Loader

  1. Page loaders are one of the important user experience to let users know that the application is loading its content while they are looking at a tiny little geometry animated loader.

  2. As a common psychology, interesting animations can keep your users engaged while theyโ€™re waiting for the page to load.

  3. Twinr's speed performance is really competitive but it also depends on the user's internet speed and website speed. So in this kind of situations, it can be a very nice user experience if the right inspiration is there by providing a nice loader.

Common Questions

Do I need to submit new version everytime I edit the Page Loader?

Answer: No, just do the changes, save it and click on publish to production. Your LIVE app will have the changes right away.

Do I need to publish new version after enabling Page Loader?

Answer: No, enable/disable the loader, save it and click on publish to production. Your LIVE app will have the changes right away.

Can I change loader size in Basic plan?

How to test Page loader in ?

Answer: No, the customization section is only doable in premium plan. But you can decide the color of loader in .

๐Ÿ”—
Twinr Previewer App
Basic and Standard plans