Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support

Magic Motion

Animated Tabs
Card List
Card Paging
Container Transitions
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Box
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Loading Indicator

Open in Framer to interactPreview this example

Use the loading indicator with a time-out even to transition between 3 different states.

Open in FramerPreview Example

Learn more about loading indicators

When waiting for something to happen on a screen, designers use spinners, loading indicators, preloaders, or progress bars to reinforce that something is actually happening. No one likes to stare at a blank screen. Loading indicators have everything to do with assurance for the user. A paper from Jakob Nielsen in 1933 sites the three main reasons for providing a loading indicator for users. Number one, they reassure the user that the program or product has not crashed but is actually just working on a problem. Second, loading indicators coupled with a type of progress bar indicates approximately how long the expected wait time is. And finally, they provide something for the user to look at, again no blank screen.

How to use one in Framer

In Framer, you can find a ready-to-use loading indicator in the Insert Menu. Search for the Loading Indicator Default Component and insert it in your project. Once it is inserted there are a few different ways to use it. One of the most powerful features of the component in the built-in timeout function. Place the loading indicator in a frame, set the duration to Timeout, and use the connector to transition to a different frame on Timeout. You can also select the style of your loading indicator. In the properties panel next to Indicator, pick from Dots, iOS, or Material.

Resources
  • Talk about this on Discord

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement