Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (161).NET Core  (29).NET MAUI  (64)Angular  (74)ASP.NET  (50)ASP.NET Core  (79)ASP.NET MVC  (88)Azure  (36)Blazor  (153)DocIO  (23)Essential JS 2  (85)Essential Studio  (174)File Formats  (29)Flutter  (123)JavaScript  (187)Microsoft  (113)PDF  (67)React  (62)Succinctly series  (128)Syncfusion  (610)TypeScript  (31)Uno Platform  (3)UWP  (4)Vue  (39)Webinar  (35)Windows Forms  (59)WinUI  (52)WPF  (138)Xamarin  (155)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (5)Build conference  (6)Business intelligence  (54)Button  (4)C#  (120)Chart  (57)Cloud  (12)Company  (445)Dashboard  (8)Data Science  (3)Data Validation  (6)DataGrid  (55)Development  (400)Doc  (7)DockingManager  (1)eBook  (96)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (18)File Manager  (4)Gantt  (11)Gauge  (11)Git  (4)Grid  (28)HTML  (11)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (312)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (30)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (36)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (22)Solution Services  (3)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (92)UI  (224)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (23)Visual Studio Code  (17)Web  (375)What's new  (213)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing the New Vue Skeleton Component

Introducing the New Vue Skeleton Component

The Syncfusion Vue UI component library is the only suite that you will ever need to build an application because it contains over 70 high-performance, lightweight, modular, and responsive UI components in a single package.

Now, it includes a new Skeleton component as part of the 2022 Volume 3 release.

Let’s explore the features of the new Vue Skeleton component and its UI design with code examples.

Skeleton overview

The Skeleton component is a modern data loading indicator that shows a preview of the content. While the interface is loading data, the component displays a layout of how the content will appear with a shimmer effect. The user will be aware of the content layout and understand that the UI is loading, resulting in an improved user experience.

Vue Skeleton Component
Vue Skeleton Component

Use cases

The following are a few places where the Skeleton component can be a great fit:

  • Loading dynamic content on a page: Users expect pages to load fast in news feeds and social media posts. However, such feeds do not always perform well since they contain unique content every time the page is visited. The Skeleton component can be extremely helpful in maintaining the page layout until the actual content is loaded.
  • Performing data operations in the background: A grid control primarily involves data handling and may take some time to load data from a server. In this scenario, the Skeleton can maintain the layout while the server loads the data.

    Vue DataGrid with Skeleton Component
    Vue DataGrid with Skeleton Component

Note: To see a loading indicator that is similar to the Skeleton component in a data grid, refer to the Vue DataGrid Loading Animation demo.

 Key features

The Vue Skeleton component has built-in support for the following features:

  • Different shapes.
  • Multiple shimmer (animation) effects.
  • Options to control its size and visibility.

Shape options

We can display page content in various shapes depending on the use case. Therefore, the placeholder for such content should also match the content shapes. The built-in content shapes of the Skeleton component meet this requirement. The component supports the following content shapes:

  • Circle
  • Rectangle
  • Square
  • Text (represents a single line of text).
Built-in Content Shapes in Vue Skeleton component
Built-in Content Shapes in Vue Skeleton component

Note: For more details, refer to the Vue Skeleton component default functionalities demo with different shapes.

Shimmer effects

Different animation styles can fit the different types of pages you deliver, so we provided the following built-in shimmer (animation) effects:

  • Wave
  • Pulse
  • Fade
Shimmer Effects in Vue Skeleton Component
Shimmer Effects in Vue Skeleton Component

Note: For more details, refer to the Vue Skeleton animation demo.

Size and visibility

To customize the Skeleton’s size and toggle between the actual content and the placeholder, the component provides the following properties:

  • height: Defines the height of rectangle and text shapes.
  • width: Defines the width of rectangle and text shapes, the side of the square shape, and the radius of the circle shape.
  • visible: Toggles the visibility of the Skeleton component.

Ease of use

The Vue Skeleton component contains a minimal API for easy integration. You can easily add it to any element as a CSS component.

The Skeleton component size can be responsive or static, providing you more flexibility in creating the content layout.

Getting started with the Vue Skeleton component

Now that we have seen the features of the Vue Skeleton component, let’s see the steps to configure it in your Vue 3 applications.

Step 1: Create a Vue application.

First, ensure you have all the prerequisites needed to run a Vue 3 app. Then, create a Vue app using the Vue CLI.

Step 2: Add Syncfusion NPM packages to the app.

Syncfusion Vue packages are available in the NPM registry. To install the packages required for the Skeleton component, use the following command:

npm install @syncfusion/ej2-vue-notifications --save

Step 3: Add CSS reference for Syncfusion Vue components.

Now, import the required CSS styles for the Skeleton component and dependency styles in the <style> section of the src/App.vue file. Refer to the following code.

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
</style>

Step 4: Add the Syncfusion Vue Skeleton component to your app.

We have completed all the necessary configurations for rendering the Syncfusion Vue components. Now, let’s add the Skeleton component by following these steps:

  1. Import the Skeleton component in the <script> section of the src/App.vue file.
    <script>
      import { SkeletonComponent } from "@syncfusion/ej2-vue-notifications";
    </script>
  2. Register the Skeleton component in your app as shown in the following code.
    Import { SkeletonComponent } from ‘@syncfusion/ej2-vue-notifications’;
    export default {
       name: “App”,
       components: {
           ‘ejs-skeleton’: SkeletonComponent
       }
    }
  3. Add the component definition in the template section.
    <template>
     <div id='element'>
      <ejs-skeleton height='15px' width=’200px’></ejs-skeleton>
     </div>
    </template>

    Summarizing the above steps, update the src/App.vue file with the following code.

    <template>
     <div id='element'>
      <ejs-skeleton height='15px' width=’200px’></ejs-skeleton>
     </div>
    </template>
     
    <script>
     import { SkeletonComponent } from '@syncfusion/ej2-vue-notifications';
     // Component Registration
     export default {
       name: "App",
       components: {
         'ejs-skeleton': SkeletonComponent
       }
     }
    </script>
    <style>
      @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
      @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
    </style>

Step 5: Run the app.

Finally, run the application using the following command.

npm run serve

Once the web server is loaded, you can find the following output by opening the Vue app in the browser at port localhost:8080. Also, you can easily customize the shape and shimmer effect using the shape and shimmerEffect properties, respectively.

Integrating the Skeleton Component into the Vue App
Integrating the Skeleton Component into the Vue App

Adding the Syncfusion Vue Skeleton as a CSS component

First, follow steps 1 through 3 in the previous section.

Note: You can also download and reference the Skeleton styles from our Theme Studio.

Next, follow these steps to add the Vue Skeleton as a CSS component in your application:

  1. Define the element for adding the Skeleton component.
    <div id="skeleton "></div>
  2. Add the CSS class “e-skeleton” to initialize the Vue Skeleton component in the element.
    <div id= "skeleton" class="e-skeleton"></div>
  3. To define the Skeleton shape, add the CSS class “e-skeleton-{shape}“, where {shape} represents the shape name. For example, “e-skeleton-circle” is for a circle shape.
    <div id="skeleton" class="e-skeleton e-skeleton-circle"></div>
  4. To define the shimmer effect, add the CSS class “e-skeleton-{effect}“, where {effect} represents the shimmer effect name. For example, “e-skeleton-wave” is for wave effect.
    <div id="skeleton" class="e-skeleton e-skeleton-circle e-skeleton-wave"></div>
  5. Now, add the styles for the height and width of the Skeleton component.
    <div id="skeleton" class="e-skeleton e-skeleton-circle e-skeleton-wave" style="height:50px; width:50px;"></div>

    Refer to the following code block for the CSS classes corresponding to all Skeleton shapes and shimmer effects.

    <div style="width: 200px;display:inline-block;">
     <label> Circle with wave effect</Label>
      <div class="e-skeleton e-skeleton-circle e-shimmer-wave" style="height:50px;width:50px;"></div>
      <br/>
     <label> Square with wave effect</Label>
      <div class="e-skeleton e-skeleton-square e-shimmer-wave" style="height:50px;width:50px;"></div>
      <br/>
     <label> Text with wave effect</Label>
      <div class="e-skeleton e-skeleton-text e-shimmer-wave" style="height:15px;width:150px;"></div>
    </div>
    <div style="width: 200px;display:inline-block;">
     <label> Rectangle with wave effect</Label>
      <div class="e-skeleton e-skeleton-rectangle e-shimmer-wave" style="height:50px;width:150px;"></div>
      <br/>
     <label> Rectangle with fade effect</Label>
      <div class="e-skeleton e-skeleton-rectangle e-shimmer-fade" style="height:50px;width:150px;"></div>
      <br/>
     <label> Rectangle with pulse effect</Label>
      <div class="e-skeleton e-skeleton-rectangle e-shimmer-pulse" style="height:50px;width:150px;"></div>
      <br/>
    </div>

Run the application

Finally, run the application using the following command.

npm run serve

Once the web server is loaded, you can find the following output by opening the Vue app in the browser at port localhost:8080.

Adding Syncfusion Vue Skeleton as a CSS Component
Adding Syncfusion Vue Skeleton as a CSS Component

References

For more details, refer to the Vue Skeleton component demos and documentation.

Supported platforms

The Skeleton component is also available in the following platforms.

PlatformLive demoDocumentation
JavaScriptJavaScript Skeleton demosGetting started with JavaScript Skeleton
AngularAngular Skeleton demosGetting started with Angular Skeleton
ReactReact Skeleton demosGetting started with React Skeleton
ASP.NET CoreASP.NET Core Skeleton demosGetting started with ASP.NET Core Skeleton
ASP.NET MVCASP.NET MVC Skeleton demosGetting Started with ASP.NET MVC Skeleton
BlazorBlazor Skeleton demosGetting started with Blazor Skeleton

Conclusion

Thanks for reading! In this blog, we have seen the features of the new Syncfusion Vue Skeleton component that rolled out in the 2022 Volume 3 release and the steps to getting started with it. Try out this component yourself and provide your feedback in the comments section below.

Also, check out our Release Notes and the What’s New pages to see the other features available in the 2022 Volume 3 release.

For existing customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features.

You can also reach us through our support forumssupport portal, or feedback portal. As always, we are happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top