当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

content-loader

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者齐高阳

操作系统跨平台

开源组织无

适用人群未知

软件概览

Angular Content Loader

Angular component that uses SVG to create a collection of loaders which simulates the structure of thecontent that will be loaded, similar to Facebook cards loaders.

Live Demo

Features

This is an Angular port for react-content-loader.

⚙️ Completely customizable: you can change the colors, speed and sizes;
✏️ Create your own loading: use thecreate-react-content-loader to createyour custom loadings easily;
�� You can use right now: there are a lot of presets to use the loader, see theoptions;
�� Performance: uses pure SVG to work, so it works without any extra scripts,canvas, etc;

Install

Yarn

yarn add @ngneat/content-loader

Usage

import { ContentLoaderModule } from '@ngneat/content-loader';

@NgModule({
  imports: [ContentLoaderModule]
})
export class AppModule {}

<content-loader>
  <svg:rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
  <svg:rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
  <svg:rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
  <svg:rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
  <svg:rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
  <svg:rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
</content-loader>

Warning: Safari renders the SVG in black in case your Angular application uses the <base href="/" /> tag in the <head/> of your index.html.Refer to the input property baseUrl below to fix this issue.

Examples

Facebook Style

<facebook-content-loader></facebook-content-loader>

List Style

<list-content-loader></list-content-loader>

Bullet list Style

<bullet-list-content-loader></bullet-list-content-loader>

API

@Inputs

Prop name and type	Environment	Description
`animate?: boolean` Defaults to `true`	-	Opt-out of animations with `false`
`baseUrl?: string` Defaults to an empty string	-	Required if you're using `<base url="/" />` document `<head/>`. This prop is common used as: `<ContentLoader baseUrl={window.location.pathname} />` which will fill the SVG attribute with the relative path. Related #93.
`speed?: number` Defaults to `1.2`	-	Animation speed in seconds.
`interval?: number` Defaults to `0.25`	-	Interval of time between runs of the animation, as a fraction of the animation speed.
`viewBox?: string` Defaults to `undefined`	-	Use viewBox props to set a custom viewBox value, for more information about how to use it, read the article How to Scale SVG.
`gradientRatio?: number` Defaults to `1.2`	-	Width of the animated gradient as a fraction of the view box width.
`rtl?: boolean` Defaults to `false`	-	Content right-to-left.
`backgroundColor?: string` Defaults to `#f5f6f7`	-	Used as background of animation.
`foregroundColor?: string` Defaults to `#eee`	-	Used as the foreground of animation.
`backgroundOpacity?: number` Defaults to `1`	-	Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari
`foregroundOpacity?: number` Defaults to `1`	-	Animation opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari
`style?: CSSProperties` Defaults to `{}`	-

Credits

This is basically an Angular port for react-content-loader.

License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Netanel Basal} ��	_Heo ��	_{Andreas Aeschlimann} ��	_alexw10 ��	_{Chinonso Chukwuogor} ��	_wynfred ��	_Rustam ��
_{Alex Malkevich} ��	_{Daniel Sogl} ��	_{Alex Szabó‮} ��	_Roy ��	_{Robin Van den Broeck} ��

This project follows the all-contributors specification. Contributions of any kind welcome!

使用案例

如何使用vue-content-loader内容加载器

当我们开发网站或者APP时，遇到内容过多加载速度慢时，会导致用户打开页面有大量空白页，vue-content-loader正是解决这个问题的一个组件，使加载内容之前生成一个dom模板，提高用户体验。第一步：安装在控制台的项目路径下执行：npm install vue-content-loader --save 第二步：引入使用 <template> <!--<content-loader>
Android ContentResolver 优化方案之 loader

在android 开发中耗时操作，尽量不要在UI线程中执行，而contentResolver 访问数据的方式是在主线程中，在数据量繁琐的时候，我们可以采用loader方式访问其他应用程序提供的数据，只需让，Activity,或者fragment 实现loaderCallBack 接口，实现其中的三个方法即可，需要注意的是，在执行完，onCreateLoader()方法之后，的返回值，将作为onLo
【Webpack5笔记】loader的概念以及手写clean-log-loader、banner-loader、babel-loader和file-loader

Loader概念帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。 Loader的执行顺序 pre：前置loader normal：普通loader inline：内联loader post：后置loader 执行的优先级：pre>normal>inline>post 相同优先级执行顺序为：从右到左，从下到上 // 此时loader执行顺序：loader3 - lo
html-loader、css-loader、style-loader简单描述

html-loader的作用在开发中，如果需要在.HTML文件中使用到模板字符串，字符串中使用到了变量，那么HTML-Plguin是无法处理的，所以会报错，如果想解决这个问题，我们需要借助一个loader----html-loader css-loader的作用在开发vue项目的过程中，因为代码太多太混乱，导致有的时候看不清那个ele元素的样式需要一个个去找，这个是框架出来之前一直都存在的通病
传统html页面使用 vue-content-loader 组件

<div id="testapp"> <template> <div> <list-loader></list-loader> </div> </template> </div> <script src="https://cdn.jsdelivr.net/npm/vue-content-loader@0.2.3/dist/vue-content-loader.js"></scri