[SOLVED] How do I add an animated Spinner in Storybook?

Issue

This Content is from Stack Overflow. Question asked by John Lee

As above, how do I add an animated Spinner in Storybook? Should I start with importing SVG?



Solution

Same as any other component. Here’s a quick example of something I use:

import React from 'react';
import { Meta, Story } from '@storybook/react';
import { LoadingIndicator, LoadingIndicatorProps } from '.';

const meta: Meta<LoadingIndicatorProps> = {
  title: 'Loading Indicator example',
  component: LoadingIndicator,
};
export default meta;
const Template: Story<LoadingIndicatorProps> = args => (
  <LoadingIndicator {...args} />
);

export const Default = Template.bind({});
Default.args = {};

You’ll probably notice I’m importing a component called LoadingIndicator. This is simply a component which renders an img wrapped by a div container with the source param of the img set to the .svg path.


This Question was asked in StackOverflow by John Lee and Answered by worstestes It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?