Git Product home page Git Product logo

stripedprocessbutton's Introduction

Build Quality Gate Status

StripedProcessButton

It's an HarmonyOS library that provides an Animated striped button to show the loading process.

Source

Inspired by https://github.com/nikartm/StripedProcessButton Version v2.0.0

Screenshot

Features

It provides an animated striped button that appears to be normal (depends on you to show or hide strips) but when clicked it gets animated according to attributes to show the loading process.

  • Different colors can be configured for a button background, main strip, and sub strip.
  • You can configure the text that needs to be displayed while the button is in the loading state and gets changed to normal button text when stopped.
  • Here you get the option to use GradientShader or just a normal shader (spb_stripeGradient is used to set it).
    Can observe both buttons clicked in the gif, they are set to true for stripe gradient and others are using a normal linear shader.
  • You can configure the corner radius for the button and the button will get a rounded corner accordingly.
  • No need to use the different graphic file for a button background, all features about setting the background color to corner radius are included over here.
  • This provides the user with the option to configure the amount of tilt on the strip while it is animating.
  • Strip width and tilt revert can also be configured.
  • All these functionalities can also be adjusted programmatically, a related snippet is shown in the Usage section.

Installation Instructions

1.For using StripedProcessButton module in sample app, include the source code and add the below dependencies in entry/build.gradle to generate hap/support.har.

	dependencies {
		implementation project(':stripedprocessbutton')
                implementation fileTree(dir: 'libs', include: ['*.har'])
                testImplementation 'junit:junit:4.13'
	}

2.For using StripedProcessButton in separate application using har file, add the har file in the entry/libs folder and add the dependencies in entry/build.gradle file.

	dependencies {
		implementation fileTree(dir: 'libs', include: ['*.har'])
		testImplementation 'junit:junit:4.13'
	}
  1. For using StripedProcessButton from a remote repository in separate application, add the below dependencies in entry/build.gradle file.
        dependencies {
	        implementation 'dev.applibgroup:stripedprocessbutton:1.0.2'
	        testCompile 'junit:junit:4.13'
        }

Usage

Adjust the xml view

<com.alpesh.strippedprocessbutton.StripedProcessButton
        ohos:id="$+id:btn_start"
        ohos:left_margin="16fp"
        ohos:right_margin="16fp"
        ohos:width="match_parent"
        ohos:height="60fp"
        ohos:layout_alignment="center"
        ohos:top_margin="40fp"
        ohos:text_size="20fp"
        ohos:text="StartProcess"
        ohos:text_font="sans-serif"
        ohos:text_weight="700"
        app:spb_showStripes="false"
        app:spb_loadingText="Buffer..."
        app:spb_cornerRadius="25"
        ohos:clickable="true"
        ohos:focusable="focus_enable"
        ohos:text_color="#FFF1F1F0"
        />

Adjust programmatically (shortly):

stripedButton.setCornerRadius(50)
        .setStripeAlpha(0.7f)
        .setStripeRevert(true)
        .setStripeGradient(false)
        .setTilt(15)
        .start();

Future work

Circular Reveal animation for button feature is currently not supported. Once the platform includes this, it can be integrated here.

License

Copyright 2018 Ivan Vodyasov

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

stripedprocessbutton's People

Contributors

alpesh12345 avatar applibengineering avatar samuel-abhishek avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.